data-aether-theme

This attribute manages the transition between your website's Light and Dark modes. It saves the user's preference to browser memory (LocalStorage) and remembers it for the next visit.

01 Usage

This attribute is typically assigned to buttons. When clicked, it adds or removes the necessary classes from the html tag.

index.html

<button data-aether-theme="light">☀️</button>

<button data-aether-theme="dark">🌙</button>

<button data-aether-theme="system">🖥️</button>

02 Mode Options

AetherUI supports three different modes compatible with modern operating systems.

Value	Function
light	Removes the class="dark" class from the <html> tag. Writes 'light' to LocalStorage.
dark	Adds the class="dark" class to the <html> tag. Writes 'dark' to LocalStorage.
system	Listens to the user's system preference.