GitHub user VasilijeBursac added a comment to 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). 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]
