sagautam5 opened a new issue, #37989:
URL: https://github.com/apache/superset/issues/37989
### Bug description
### My Use Case
Previously, I have managed to embed superset dashboards in my Vue App. Only
UI customization available was with the custom css templates and superset
didn't have support for themes.
With the release of v6.0.0 on last december, theme customization feature is
available. Currently, I have upgraded my superset and trying to apply themes
for embedded dashboards. I want to apply theme based on main application theme
dynamically.
### Current Approach
My main application stores currently applied theme on local storage and can
be accessed like this:
```
const appTheme = localStorage.getItem('theme');
```
Based on this value, I am trying to embed dashboards along with dynamic
theme like this:
```
export const dashboardEmbedder = async (dashboard, supersetDomain) => {
const appTheme = localStorage.getItem('theme');
const mountPoint =
document.getElementById(`superset-dashboard-${dashboard.uuid}`);
if (mountPoint) {
mountPoint.innerHTML = '';
await embedDashboard({
id: dashboard.uuid,
supersetDomain,
mountPoint,
fetchGuestToken: () => fetchGuestToken(dashboard.uuid),
dashboardUiConfig: {
hideChartControls: true,
hideTitle: true
},
iframeSandboxExtras: ['allow-top-navigation',
'allow-popups-to-escape-sandbox'],
}).then((dashboard) => {
dashboard.setThemeMode(appTheme == 'dark' ? 'dark' : 'default');
});
}
};
```
Possible Theme Values on App Side: `light` | `dark`
Allowed values on superset: `dark` | `default` | `system`
In my case, default theme is loaded on embedded dashboards all the time,
method `setThemeMode` does not seems to work.
I have also tried `setThemeConfig` as well, got same issue with it as well.
### Static theme works
I have tried one more approach. Created two custom themes on superset
somewhat similar to dark and light mode with ant design and applied themes
manually from here:
Dashboard -> Edit Dashboard -> Themes & CSS
Selected theme from here seems to work on embedded dashboard.
### Environment
I am using docker for overall setup. Both superset and main applications are
running in same network.
### Screenshots/recordings
### Screenshots
#### Main APP
<img width="1024" height="735" alt="Image"
src="https://github.com/user-attachments/assets/c2d8f222-4a11-4d98-a4e1-ff3f1fd9a76c";
/>
#### Superset
<img width="1919" height="648" alt="Image"
src="https://github.com/user-attachments/assets/66d69a0f-8970-4444-9869-86425ce8f04c";
/>
As you can see, light mode is enabled in main application it's still showing
dark theme on dashboard
### Superset version
6.0.0
### Python version
3.10
### Node version
18 or greater
### Browser
Chrome
### Additional context
I have enabled this flag from `superset_config.py`
```
ENABLE_UI_THEME_ADMINISTRATION=True
```
Enabled permissions for Role used in Embedding
1. Can read Theme
2. Can export Theme
3. menu access Themes
<img width="591" height="568" alt="Image"
src="https://github.com/user-attachments/assets/a27546ad-0053-4bb9-bb32-245f2a9ca357";
/>
### Checklist
- [x] I have searched Superset docs and Slack and didn't find a solution to
my problem.
- [x] I have searched the GitHub issue tracker and didn't find a similar bug
report.
- [x] I have checked Superset's logs for errors and if I found a relevant
Python stacktrace, I included it here as text in the "additional context"
section.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
