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

Simple Toggle

Use a single, simple toggle to switch between light and dark mode.

Dark Mode
Light Mode

Automatic Detection

Just by adding the class detect-theme to your body tag, Asterial 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

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