Actions Sheets are elements that appear from the bottom of the page. These can be triggerd by any element, buttons, text, images, and can be used as menus as well.
What is Auto Dark Mode?
Just by adding the class detect-theme to your body class, the page will detect if your device is in dark mode and switch theme automatically.
What about older devices?
Older devices will show the default page theme you select. In our case, it is light mode, but you can set dark mode by default.
Auto Dark Prompt
You can enable this menu to automatically notify users that automatic dark mode has been detected and to suggest switching to dark mode
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 ManuallyDark Mode Toggle
This toggle will remember and always activate depending on your dark mode preferences.
Activate Dark Mode
Show content based on Theme Mode
You can show content based on the weather your page is set in light o dark mode! For example, let's take an image!
The lights are off!
This can be applied to images, texts and every other element you wish. Just add the class show-on-theme-light and our code will do the rest.
The lights are on!
This can be applied to images, texts and every other element you wish. Just add the class show-on-theme-dark and our code will do the rest.