Skip to content

Always Set data-theme="light" Instead of Removing It #5

@JoshuaAlzate

Description

@JoshuaAlzate

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-theme attribute 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions