Always Set data-theme="light" Instead of Removing It #5
Description
Problem
When the light theme is selected, the library currently removes the data-theme attribute from the document root.
While this works for setups that rely purely on CSS variables or :root, it breaks compatibility with libraries like DaisyUI, which require a data-theme attribute to detect the active theme.
Without the attribute, DaisyUI falls back to defaults or shows inconsistent styling.
Proposed Change
Instead of removing data-theme for the light theme:
- Always set
data-theme="light"when the light theme is active. - Continue setting
data-theme="dark"for dark mode. - Ensure the
data-themeattribute is never absent, keeping theme behaviour explicit.
Current vs Proposed Behaviour
Current (light mode)
<html>
<!-- data-theme removed -->
</html>Proposed (light mode)
<html data-theme="light"> </html>
Dark mode remains unchanged
<html data-theme="dark"> </html>
Why This Matters
-
Ensures seamless compatibility with DaisyUI
-
Prevents incorrect or fallback styling
-
Avoids theme flash (FOUC) caused by missing theme tokens
-
Makes theme selection predictable and debuggable
-
Aligns with common Tailwind + DaisyUI patterns