GitHub user dosubot[bot] added a comment to the discussion: Question: How to
apply per-user theme to embedded dashboards without modifying global dashboard
configuration?
<!-- Answer -->
Yes! Superset's Embedded SDK supports per-user/session theming without
modifying global dashboard configuration. Since you're on **v6.1.0rc1**, you
should have access to both methods.
**Two SDK methods for per-user theming:**
1. **`setThemeConfig()`** — Configure complete light/dark themes with custom
branding
2. **`setThemeMode()`** — Dynamically switch between themes at runtime
Here's how to implement it:
```javascript
const dashboard = await embedDashboard({
id: "your-dashboard-id",
supersetDomain: "https://your-superset.com";,
mountPoint: document.getElementById("dashboard"),
fetchGuestToken: () => fetchToken(),
});
// Configure your brand themes upfront
dashboard.setThemeConfig({
theme_default: {
token: {
colorPrimary: '#your-light-brand-color',
fontFamily: "'Your Font', sans-serif",
},
},
theme_dark: {
token: {
colorPrimary: '#your-dark-brand-color',
colorBgBase: '#121212',
colorTextBase: '#ffffff',
},
algorithm: 'dark',
},
});
// React to user theme changes
userThemeSelector.on('change', (theme) => {
dashboard.setThemeMode(theme === 'dark' ? 'dark' : 'default');
});
```
**Important caveat:** These SDK methods only affect **UI theming**
(backgrounds, text colors, Ant Design components). They do **NOT** affect chart
color palettes (bar chart colors, pie slices, etc.). Chart colors require
updating `json_metadata.color_scheme` in the database — [there's no runtime API
for per-user chart
colors](https://github.com/apache/superset/discussions/34255#discussioncomment-13836584).
**Known issues to be aware of:**
- There's a [theme flash on initial
load](https://github.com/apache/superset/issues/38336) where the server default
renders first, then switches after receiving your theme config
- A [recent issue](https://github.com/apache/superset/issues/37989) documents
that `setThemeMode()` didn't work in v6.0.0 because the server-side handler
wasn't cherry-picked — this should be resolved in v6.1.0rc1, but verify it
works in your environment
Make sure you're using `@superset-ui/[email protected]` or later.
<!-- Dosu Comment Footer -->
*To reply, just mention
[@dosu](https://go.dosu.dev/dosubot?utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=brand-link).*
---
<sup>How did I do?
[Good](https://app.dosu.dev/response-feedback/80f4a96c-4f59-4fa6-bd7d-c0e3d30af1d5?feedback_type=great_response&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-great_response)
|
[Irrelevant](https://app.dosu.dev/response-feedback/80f4a96c-4f59-4fa6-bd7d-c0e3d30af1d5?feedback_type=irrelevant_answer&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-irrelevant_answer)
|
[Incorrect](https://app.dosu.dev/response-feedback/80f4a96c-4f59-4fa6-bd7d-c0e3d30af1d5?feedback_type=incorrect_sources&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-incorrect_sources)
|
[Verbose](https://app.dosu.dev/response-feedback/80f4a96c-4f59-4fa6-bd7d-c0e3d30af1d5?feedback_type=too_verbose&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-too_verbose)
| [Hallucination](https://app.dosu.dev/response-feedback/80f4a96c-4f59-4f
a6-bd7d-c0e3d30af1d5?feedback_type=hallucination&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-hallucination)
| [Report
🐛](https://app.dosu.dev/response-feedback/80f4a96c-4f59-4fa6-bd7d-c0e3d30af1d5?feedback_type=bug_report&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-bug_report)
|
[Other](https://app.dosu.dev/response-feedback/80f4a96c-4f59-4fa6-bd7d-c0e3d30af1d5?feedback_type=other&utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=feedback-other)</sup>
[](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=chat-badge) [](https://cursor.com/link/prompt?text=Yes%21%20Superset%27s%20Embedded%20SDK%20supports%20per-user/session%20theming%20without%20modifying%20global%20dashboard%20configuration.%20Since%20you%27re%20on%20%2A%2Av6.1.0rc1%2A%2A%2C%20you%20should%20have%20access%20to%20both%20methods.%0A%0A%2A%2ATwo%20SDK%20methods%20for%20per-user%20theming%3A%2A%2A%0A%0A1.%20%2A%2A%60setThemeConfig%28%29%60%2A%2A%20%E2%80%94%20Configure%20complete%20light/dark%20themes%20with%20custom%20branding%0A2.%20%2A%2A%60setThemeMode%28%29%60%2A%2A%20%E2%80%94%20Dynamically%20switch%20between%20themes%20at%20runtime%0A%0AHere%27s%20how%20to%20implement%20it%3A%0A%0A%60%60%60javascript%0Aconst%20dashboard%20%3D%20await%20embedDashboard%28%7B%0
A%20%20id%3A%20%22your-dashboard-id%22%2C%0A%20%20supersetDomain%3A%20%22https%3A//your-superset.com%22%2C%0A%20%20mountPoint%3A%20document.getElementById%28%22dashboard%22%29%2C%0A%20%20fetchGuestToken%3A%20%28%29%20%3D%3E%20fetchToken%28%29%2C%0A%7D%29%3B%0A%0A//%20Configure%20your%20brand%20themes%20upfront%0Adashboard.setThemeConfig%28%7B%0A%20%20theme_default%3A%20%7B%0A%20%20%20%20token%3A%20%7B%0A%20%20%20%20%20%20colorPrimary%3A%20%27%23your-light-brand-color%27%2C%0A%20%20%20%20%20%20fontFamily%3A%20%22%27Your%20Font%27%2C%20sans-serif%22%2C%0A%20%20%20%20%7D%2C%0A%20%20%7D%2C%0A%20%20theme_dark%3A%20%7B%0A%20%20%20%20token%3A%20%7B%0A%20%20%20%20%20%20colorPrimary%3A%20%27%23your-dark-brand-color%27%2C%0A%20%20%20%20%20%20colorBgBase%3A%20%27%23121212%27%2C%0A%20%20%20%20%20%20colorTextBase%3A%20%27%23ffffff%27%2C%0A%20%20%20%20%7D%2C%0A%20%20%20%20algorithm%3A%20%27dark%27%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%0A//%20React%20to%20user%20theme%20changes%0AuserThemeSelector.on%2
8%27change%27%2C%20%28theme%29%20%3D%3E%20%7B%0A%20%20dashboard.setThemeMode%28theme%20%3D%3D%3D%20%27dark%27%20%3F%20%27dark%27%20%3A%20%27default%27%29%3B%0A%7D%29%3B%0A%60%60%60%0A%0A%2A%2AImportant%20caveat%3A%2A%2A%20These%20SDK%20methods%20only%20affect%20%2A%2AUI%20theming%2A%2A%20%28backgrounds%2C%20text%20colors%2C%20Ant%20Design%20components%29.%20They%20do%20%2A%2ANOT%2A%2A%20affect%20chart%20color%20palettes%20%28bar%20chart%20colors%2C%20pie%20slices%2C%20etc.%29.%20Chart%20colors%20require%20updating%20%60json_metadata.color_scheme%60%20in%20the%20database%20%E2%80%94%20%5Bthere%27s%20no%20runtime%20API%20for%20per-user%20chart%20colors%5D%28https%3A//github.com/apache/superset/discussions/34255%23discussioncomment-13836584%29.%0A%0A%2A%2AKnown%20issues%20to%20be%20aware%20of%3A%2A%2A%0A-%20There%27s%20a%20%5Btheme%20flash%20on%20initial%20load%5D%28https%3A//github.com/apache/superset/issues/38336%29%20where%20the%20server%20default%20renders%20first%2C%20then%20switc
hes%20after%20receiving%20your%20theme%20config%0A-%20A%20%5Brecent%20issue%5D%28https%3A//github.com/apache/superset/issues/37989%29%20documents%20that%20%60setThemeMode%28%29%60%20didn%27t%20work%20in%20v6.0.0%20because%20the%20server-side%20handler%20wasn%27t%20cherry-picked%20%E2%80%94%20this%20should%20be%20resolved%20in%20v6.1.0rc1%2C%20but%20verify%20it%20works%20in%20your%20environment%0A%0AMake%20sure%20you%27re%20using%20%60%40superset-ui/embedded-sdk%400.3.0%60%20or%20later.) [](https://go.dosu.dev/discord-bot?utm_source=github&utm_medium=bot-comment&utm_campaign=github-assistant&utm_content=join-discord) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/38900)
GitHub link:
https://github.com/apache/superset/discussions/38900#discussioncomment-16336333
----
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]
