What the theme module does
When the attribute
data-anim-darklite
is added to the page, the module enables automatic
theme switching logic.
- Applies light or dark theme automatically
-
Detects system theme via
prefers-color-scheme - Allows manual switching via buttons
-
Saves user preference in
localStorage - Supports automatic time-based theme switching
src/components/ui/darklite/
Enable the theme system
Add the required attribute
data-anim-darklite
to the page wrapper.
<body data-anim-darklite>
...
</body>Manual theme control
You can add buttons to toggle or reset the theme manually.
<button data-anim-darklite-set>
Toggle theme
</button>
<button data-anim-darklite-reset>
Reset theme
</button>Time based theme
You can enable automatic dark theme during specific hours
using the attribute
data-anim-darklite-time.
<body data-anim-darklite data-anim-darklite-time="18,5">HTML theme states
The module automatically adds theme attributes to the
<html> element.
-
data-anim-darklite-light -
data-anim-darklite-dark
Theme priority order
The module determines the active theme using the following priority:
- Saved user preference
- Time based theme
-
System theme (
prefers-color-scheme)
Download
Download Animmaster Vite Template and start building projects with a ready-to-use UI system and build pipeline.