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 ModeActivate 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 ModeYour 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 DetectionYour 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 DetectionAuto 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