Skip to content

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

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

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions