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 modeDetect Dark/Light Mode
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
Dark 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.