GitHub user dosubot[bot] added a comment to the discussion: How to keep custom
header-linked page theme consistent with Superset Dark/Light mode (without
modifying Superset source)?
<!-- Answer -->
You can keep your custom page's theme in sync with Superset's dark/light mode
by reading the user's theme preference from localStorage and responding to
changes. Superset v6 stores the current theme mode in localStorage under the
key superset-theme-mode. The value can be "dark", "light", or "system". If it's
"system", you should use the browser's prefers-color-scheme media query to
detect the effective theme. Your custom page can use JavaScript to read this
value and apply the correct CSS class or stylesheet.
Here's a pattern you can use in your custom page:
```js
function getSupersetTheme() {
const mode = localStorage.getItem('superset-theme-mode');
if (mode === 'dark' || mode === 'light') return mode;
// If 'system', use the browser's color scheme
if (window.matchMedia('(prefers-color-scheme: dark)').matches) return 'dark';
return 'light';
}
function applyTheme() {
const theme = getSupersetTheme();
document.body.classList.toggle('dark-mode', theme === 'dark');
document.body.classList.toggle('light-mode', theme === 'light');
}
// Listen for theme changes in Superset (localStorage) or OS (media query)
window.addEventListener('storage', (e) => {
if (e.key === 'superset-theme-mode') applyTheme();
});
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change',
applyTheme);
// Initial theme application
applyTheme();
```
Then, in your CSS, define styles for both modes:
```css
body.light-mode {
background: #fff;
color: #000;
}
body.dark-mode {
background: #181818;
color: #fff;
}
```
This approach ensures your custom page always matches the current Superset
theme, including when the user switches themes or changes their OS preference,
without modifying Superset source code. For more details on how Superset
manages theme state, see
[ThemeController.tsx](https://github.com/apache/superset/blob/master/superset-frontend/src/theme/ThemeController.tsx).
<!-- Dosu Comment Footer -->
*To reply, just mention [@dosu](https://go.dosu.dev/dosubot).*
---
<sup>How did I do?
[Good](https://app.dosu.dev/response-feedback/79969aea-37fb-4bfb-98b7-183b1f50108f?feedback_type=great_response)
|
[Irrelevant](https://app.dosu.dev/response-feedback/79969aea-37fb-4bfb-98b7-183b1f50108f?feedback_type=irrelevant_answer)
|
[Incorrect](https://app.dosu.dev/response-feedback/79969aea-37fb-4bfb-98b7-183b1f50108f?feedback_type=incorrect_sources)
|
[Verbose](https://app.dosu.dev/response-feedback/79969aea-37fb-4bfb-98b7-183b1f50108f?feedback_type=too_verbose)
|
[Hallucination](https://app.dosu.dev/response-feedback/79969aea-37fb-4bfb-98b7-183b1f50108f?feedback_type=hallucination)
| [Report
🐛](https://app.dosu.dev/response-feedback/79969aea-37fb-4bfb-98b7-183b1f50108f?feedback_type=bug_report)
|
[Other](https://app.dosu.dev/response-feedback/79969aea-37fb-4bfb-98b7-183b1f50108f?feedback_type=other)</sup>
[](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=You%20can%20keep%20your%20custom%20page%27s%20theme%20in%20sync%20with%20Superset%27s%20dark/light%20mode%20by%20reading%20the%20user%27s%20theme%20preference%20from%20localStorage%20and%20responding%20to%20changes.%20Superset%20v6%20stores%20the%20current%20theme%20mode%20in%20localStorage%20under%20the%20key%20superset-theme-mode.%20The%20value%20can%20be%20%22dark%22%2C%20%22light%22%2C%20or%20%22system%22.%20If%20it%27s%20%22system%22%2C%20you%20should%20use%20the%20browser%27s%20prefers-color-scheme%20media%20query%20to%20detect%20the%20effective%20theme.%20Your%20custom%20page%20can%20use%20JavaScript%20to%20read%20this%20value%20and%20apply%20the%20correct%20CSS%20class%20or%20stylesheet.%0A%0AHere%27s%20a%20pattern%20you%20can%20use%20in%20you
r%20custom%20page%3A%0A%0A%60%60%60js%0Afunction%20getSupersetTheme%28%29%20%7B%0A%20%20const%20mode%20%3D%20localStorage.getItem%28%27superset-theme-mode%27%29%3B%0A%20%20if%20%28mode%20%3D%3D%3D%20%27dark%27%20%7C%7C%20mode%20%3D%3D%3D%20%27light%27%29%20return%20mode%3B%0A%20%20//%20If%20%27system%27%2C%20use%20the%20browser%27s%20color%20scheme%0A%20%20if%20%28window.matchMedia%28%27%28prefers-color-scheme%3A%20dark%29%27%29.matches%29%20return%20%27dark%27%3B%0A%20%20return%20%27light%27%3B%0A%7D%0A%0Afunction%20applyTheme%28%29%20%7B%0A%20%20const%20theme%20%3D%20getSupersetTheme%28%29%3B%0A%20%20document.body.classList.toggle%28%27dark-mode%27%2C%20theme%20%3D%3D%3D%20%27dark%27%29%3B%0A%20%20document.body.classList.toggle%28%27light-mode%27%2C%20theme%20%3D%3D%3D%20%27light%27%29%3B%0A%7D%0A%0A//%20Listen%20for%20theme%20changes%20in%20Superset%20%28localStorage%29%20or%20OS%20%28media%20query%29%0Awindow.addEventListener%28%27storage%27%2C%20%28e%29%20%3D%3E%20%7B%0A%20%20i
f%20%28e.key%20%3D%3D%3D%20%27superset-theme-mode%27%29%20applyTheme%28%29%3B%0A%7D%29%3B%0Awindow.matchMedia%28%27%28prefers-color-scheme%3A%20dark%29%27%29.addEventListener%28%27change%27%2C%20applyTheme%29%3B%0A%0A//%20Initial%20theme%20application%0AapplyTheme%28%29%3B%0A%60%60%60%0A%0AThen%2C%20in%20your%20CSS%2C%20define%20styles%20for%20both%20modes%3A%0A%0A%60%60%60css%0Abody.light-mode%20%7B%0A%20%20background%3A%20%23fff%3B%0A%20%20color%3A%20%23000%3B%0A%7D%0Abody.dark-mode%20%7B%0A%20%20background%3A%20%23181818%3B%0A%20%20color%3A%20%23fff%3B%0A%7D%0A%60%60%60%0A%0AThis%20approach%20ensures%20your%20custom%20page%20always%20matches%20the%20current%20Superset%20theme%2C%20including%20when%20the%20user%20switches%20themes%20or%20changes%20their%20OS%20preference%2C%20without%20modifying%20Superset%20source%20code.%20For%20more%20details%20on%20how%20Superset%20manages%20theme%20state%2C%20see%20%5BThemeController.tsx%5D%28https%3A//github.com/apache/superset/blob/master/s
uperset-frontend/src/theme/ThemeController.tsx%29.) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/37375)
GitHub link:
https://github.com/apache/superset/discussions/37375#discussioncomment-15576573
----
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]
