Custom Dark Theme - support light/dark config inheritance & populate new session msg#12707
Custom Dark Theme - support light/dark config inheritance & populate new session msg#12707mayagbarnes merged 7 commits intodevelopfrom
Conversation
mayagbarnes
added
security-assessment-completed
change:feature
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) ✅ license/snyk check is complete. No issues have been found. (View Details) |
✅ PR preview is ready!
|
mayagbarnes
changed the title
There was a problem hiding this comment.
Pull Request Overview
This PR implements part 2 of the Custom Dark Theme feature by adding support for light/dark theme configuration inheritance and sending structured theme data to the frontend. It expands theme configuration to support nested sections like [theme.light], [theme.dark], [theme.light.sidebar], and [theme.dark.sidebar], with proper precedence handling between base theme files, config.toml, CLI flags, and environment variables.
Key Changes
- Enhanced theme configuration system to support light/dark specific sections and nested sidebar configurations
- Updated theme validation and inheritance processing to handle complex section structures
- Modified session message creation to populate all theme sections for frontend consumption
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| lib/tests/streamlit/runtime/app_session_test.py | Refactored mock configuration helper and added comprehensive tests for new theme sections |
| lib/tests/streamlit/config_util_test.py | Updated tests to reflect new theme validation structure and added comprehensive inheritance tests |
| lib/tests/streamlit/config_test.py | Enhanced integration tests for complex theme inheritance scenarios |
| lib/streamlit/runtime/app_session.py | Added theme message population for all new theme sections (light, dark, nested sidebars) |
| lib/streamlit/errors.py | Refined theme error classes for better error handling and messaging |
| lib/streamlit/config_util.py | Extensively refactored theme validation and inheritance processing for nested sections |
mayagbarnes
changed the title
|
|
||
| with self._theme_file(theme_content) as theme_file: | ||
| # Config file references theme file and sets some overrides | ||
| config_toml = f""" |
There was a problem hiding this comment.
With the following config:
[theme]
primaryColor = "#0"
[theme.dark]
primaryColor = "#1"
[theme.sidebar]
primaryColor = "#2"
What would be the expected primaryColor used on the dark theme sidebar? does theme.dark or theme.sidebar take precedence here?
There was a problem hiding this comment.
This portion of the logic will actually be handled in a subsequent PR (FE), but is an outstanding clarification question I have anyway - @jrieke what are your thoughts?
Should config section precedence (from lower to higher) look like:
- Option 1: Dark theme sidebar =
theme<theme.dark<theme.sidebar<theme.dark.sidebar - Option 2: Dark theme sidebar =
theme<theme.sidebar<theme.dark<theme.dark.sidebar
Per spec:
[theme.light] and [theme.dark] should inherit any changes from [theme], and [theme.light.sidebar] and [theme.dark.sidebar] should inherit any changes from [theme.sidebar]
Which seems to indicate Option 1 to be correct?
Describe your changes
Part 2 of Custom Dark Theme Feature
PR handles setting of theme config values for all sections -
[theme],[theme.sidebar],[theme.light],[theme.dark],[theme.light.sidebar],[theme.dark.sidebar]- in new session message / proper section precedence between a base theme.tomlfile,config.toml, CLI flags & env vars.This PR finishes handling of theme configs for respective sections, producing the expected nested structure (
themeInputexample below). This will be used by the FE in the next PR.{ "base": "light", "primaryColor": "blue", "sidebar": {...}, # Config options from theme.sidebar "light": { # Config options from theme.light ...other options... "sidebar": {...}, # Config options from theme.light.sidebar }, "dark": { # Config options from theme.dark ...other options... "sidebar": {...}, # Config options from theme.dark.sidebar }, ...other theme options... }Testing Plan