Proposal: Add HTML theme attribute for light/dark targeting

[elizabetdev]

It would be helpful if click-ui exposed a theme attribute at the HTML level, for example something like data-theme, to make it easier to target light and dark themes in product code.

Today, when we need to apply theme-specific styles (e.g. light vs. dark), we often have to rely on global styled components or theme conditionals inside JS/TS. This adds complexity and makes styling less straightforward.

Other design systems solve this by exposing a global attribute. For example, Mantine uses:

data-mantine-color-scheme="light"

This enables simple CSS targeting like:

[data-mantine-color-scheme="dark"] *:focus {
  ...
}

Suggested approach

Expose a generic attribute on the root HTML element, such as:

data-theme="light"

or

data-cui-theme="light"

This would allow consumers to:
• Target light/dark themes directly in CSS
• Avoid unnecessary global styled components
• Simplify overrides and integrations
• Improve ergonomics for non-JS styling use cases

Why this helps
• Reduces reliance on theme logic in JS
• Makes theme targeting more discoverable and predictable
• Aligns with patterns used by other UI libraries/design systems
• Improves developer experience for consumers of click-ui