GitHub user VasilijeBursac edited a comment on the discussion: Is it possible
to detect the currently active theme/theme algorithm (light/dark) from
custom/external CSS in Apache Superset?
I gave this some thought and the idea I came up with is to expose the active
theme on the `<body>` element (for example via a `data-theme="light|dark"`
attribute or a theme-specific class) when theme changes. Would it make sense
for Superset to expose the currently active theme (e.g. light/dark) on the
`<body>` element, for example via a `data-theme="light|dark"` attribute or a
theme-specific class?
This would allow custom/external CSS to conditionally apply styles based on the
active theme, which is especially useful to avoid visual conflicts between
light and dark themes when using custom CSS overrides. Short examples:
## Option 1. Adding `data-theme` attribute to `<body>` or `#root`
`<body data-theme="light">` or `<body data-theme="dark">`
Then external CSS can do:
```
body[data-theme="dark"] .my-custom-class {
background-color: #222;
}
body[data-theme="light"] .my-custom-class {
background-color: #fff;
}
```
## Option 2: Adding a theme-specific class to `<body>`:
`<body class="superset-theme-light superset-theme-default">` or `<body
class="superset-theme-dark">`
CSS usage:
```
.superset-theme-dark .chart-container {
border-color: #444;
}
```
@mistercrunch @rusackas @msyavuz @dosu Is something like this currently
available, and if not, would a PR implementing this be acceptable approach? Do
you prefer the attribute or custom class approach?
GitHub link:
https://github.com/apache/superset/discussions/37035#discussioncomment-15468642
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
