Fix custom theme when embedded with embed_options #13498
Conversation
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
|
Thanks for contributing to Streamlit! 🎈 Please make sure you have read our Contributing Guide. You can find additional information about Streamlit development in the wiki. The review process:
We're receiving many contributions and have limited review bandwidth — please expect some delay. We appreciate your patience! 🙏 |
There was a problem hiding this comment.
Pull request overview
This PR fixes custom theme selection when the app is embedded with embed_options query parameters. The fix ensures that host-specified themes (via embed_options=light_theme or embed_options=dark_theme) take precedence over cached user preferences, allowing embedding hosts to control the theme for consistency with their own UI.
Key changes:
- Introduced
getHostSpecifiedThemeOnly()to distinguish between explicit host theme specification vs. auto theme fallback - Updated theme selection logic in
App.tsxto prioritizeembed_optionsover cached preferences when custom themes are added or removed
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
frontend/lib/src/theme/utils.ts |
Added getHostSpecifiedThemeOnly() function that returns theme from query params or null (without auto theme fallback); refactored getHostSpecifiedTheme() to use it |
frontend/lib/src/theme/utils.test.ts |
Added comprehensive test suite for getHostSpecifiedThemeOnly() covering null return, light/dark themes, and system preference scenarios |
frontend/lib/src/index.ts |
Exported the new getHostSpecifiedThemeOnly function for use in the app |
frontend/app/src/App.tsx |
Updated processThemeInput() to prioritize host-specified theme over cached preference when adding/removing custom themes; added createAutoTheme and getHostSpecifiedThemeOnly imports |
frontend/app/src/App.test.tsx |
Added extensive test suite for embed_options behavior with custom themes, including tests for overriding cached preferences and proper fallback handling |
|
Thank you @mayagbarnes for your feedback! Super helpful. I've addressed all your comments. PTAL. Meanwhile, I have trouble running frontend unit tests locally. It shows errors like |
|
Hi @ranmocy, thanks for your contribution and speedily addressing feedback! |
|
Thanks @mayagbarnes for the quick reviews! |
|
The current plan is to have the 1.53 release next week (this fix would be included) - but please note this is subject to change |
When the app is embedded, always honor the query params to choose the theme, especially when the app has custom themes. This allows the host to sync the themes between the host app and the embedded Streamlit app for consistency. This is critical when the host app manages the theme selection itself. The cached theme selection in the local storage may be set when user visit the Streamlit app directly from a different interface. It should only be honored when the embedding option not present in the URL query param.
Describe your changes
When the app is embedded, always honor the query params to choose the theme, especially when the app has custom themes.
This allows the host to sync the themes between the host app and the embedded Streamlit app for consistency. This is critical when the host app manages the theme selection itself.
The cached theme selection in the local storage may be set when user visit the Streamlit app directly from a different interface. It should only be honored when the embedding option not present in the URL query param.
Screenshot or video (only for visual changes)
GitHub Issue Link (if applicable)
Fixes #13496
Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.