ClickHouse / ClickHouse/click-ui

Proposal: Add HTML theme attribute for light/dark targeting

Open
#813 1 comment 0 reactions 1 assignee Claimed by @punkbit View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.