Auto Dark Mode

# Auto Dark Mode

#### Manual Activation

Activate dark mode with any button, any icon or even with toggles. This can simply be done by adding the class data-toggle-theme or data-toggle-theme-switch to any element you want.

Turn On Dark Mode Turn On Light Mode

#### Activate with Toggle

You can also use a fancy switch to switch between light and dark mode.

Tap to Enable

#### Dark Mode

#### Light Mode

#### Show Content Based on Theme

You can show content depending on light or dark mode. For example, in the header, the moon icon turns to a lightbulb if you switch to dark mode.

### I show on Light Mode

This card will show in Light Mode Only

### I show on Dark Mode

This card will show in Dark Mode Only

#### Automatic Detection

Just by adding the class detect-theme to your body tag, Appkit will automatically detect and switch the theme based on your device settings.

Detect Dark/Light Mode

#### Your Device is in Dark Mode

We detected your device is in dark mode, so we set the entire page to dark for you. You can disable this automatic feature or switch to light mode from the header icon

Detect Dark/Light Mode Disable Auto Detection

#### Your Device is in Light Mode Mode

We detected your device is in dark mode, so we set the entire page to dark for you. You can disable this automatic feature or switch to light mode from the header icon

Detect Dark/Light Mode Disable Auto Detection

#### Auto Light & Dark Modes Unsupported

Your device doesn't support auto dark and light modes, but you can still toggle them using a button or the icon in the top right corner of the header.

Detect Dark/Light Mode Manually