ClickHouse / ClickHouse/click-ui
Proposal: Add HTML theme attribute for light/dark targeting
- Dominant language
- TypeScript
- Stars
- 135
- Forks
- 33
- Avg merge
- 2d 13h
- Merged PRs (30d)
- 19
Description
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:
```css
[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
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.