support `theme.sidebar` custom theme

sfc-gh-pchiu commented 1 week ago

Describe your changes

Support [theme.sidebar] in streamlit config.

For example, now we can add theme options for sidebar in config.toml


[theme.sidebar]

primaryColor = "#bb5a38"
baseRadius = "full"
headingFont = "bold, serif"
backgroundColor = "#e8e7dd"
secondaryBackgroundColor = "#ecebe3"
borderColor = "#293246"
textColor = "red"
linkColor = "#3d3a2a"
borderColor = "#d3d2ca"
showBorderAroundInputs = true
# etc

Theming Enhancements:

Added a new CustomThemeCategories enum to categorize theme options, with "sidebar" as a new category. (lib/streamlit/config.py)
Implemented a function _create_theme_options to create theme-related configuration options that can be applied to multiple categories, such as "theme" and "theme.sidebar". (lib/streamlit/config.py)
Updated the configuration to include theme options for the sidebar, such as primaryColor, backgroundColor, textColor, and more. (lib/streamlit/config.py) [1] [2] [3] [4]

Configuration Handling:

Enhanced the _update_config_with_toml function to process nested configuration sections, allowing for custom theme sub-categories. (lib/streamlit/config.py)
Modified the _populate_theme_msg function to handle custom theme categories, ensuring that the sidebar theme is properly populated. (lib/streamlit/runtime/app_session.py) [1] [2] [3] [4]

Testing:

Added tests for the new _create_theme_options function and verified that theme options are correctly created and deleted for multiple categories. (lib/tests/streamlit/config_test.py) [1] [2]
Implemented new playwright tests for the sidebar custom theme in the sidebar_custom_theme_test.py file. (e2e_playwright/theming/sidebar_custom_theme_test.py)

Github Issue

https://github.com/streamlit/streamlit/issues/8844

Testing Plan

Unit Tests (JS and/or Python)
E2E Tests

Manual Tests

A. Set in `config.toml`

[theme]

primaryColor = "4747D4"
showSidebarSeparator = true

[theme.sidebar]

baseRadius = "full"
font = "'Times New Roman', 'Times', serif"
headingFont = "bold, serif"
primaryColor = "FF7518"

B. `streamlit config show`

Ran show command yield the correct and visible sidebar configs

...
[theme]

# The preset Streamlit theme that your custom theme inherits from.
# One of "light" or "dark".
# base =

# Primary accent color for interactive elements.
# primaryColor =

# Background color for the main content area.
# backgroundColor =

# Background color used for the sidebar and most interactive widgets.
# secondaryBackgroundColor =

# Color used for almost all text.
# textColor =

# The font family for all text in the app, except code blocks. One of "sans serif",
# "serif", or "monospace".
# To use a custom font, it needs to be added via [theme.fontFaces].
# font =

[theme.sidebar]

# Primary accent color for interactive elements.
# primaryColor =

# Background color for the main content area.
# backgroundColor =

# Background color used for the sidebar and most interactive widgets.
# secondaryBackgroundColor =

# Color used for almost all text.
# textColor =

# The font family for all text in the app, except code blocks. One of "sans serif",
# "serif", or "monospace".
# To use a custom font, it needs to be added via [theme.fontFaces].
# font =

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

github-actions[bot] commented 1 week ago

✅ PR preview is ready!

Name	Link
📦 Wheel file	https://core-previews.s3-us-west-2.amazonaws.com/pr-10772/streamlit-1.43.2-py3-none-any.whl
🕹️ Preview app	pr-10772.streamlit.app (☁️ Deploy here if not accessible)

snyk-io[bot] commented 4 days ago

:tada: Snyk checks have passed. No issues have been found so far.

:white_check_mark: security/snyk check is complete. No issues have been found. (View Details)

:white_check_mark: license/snyk check is complete. No issues have been found. (View Details)

streamlit / streamlit