Custom Dark Theme - theme & sidebar theme creation by mayagbarnes · Pull Request #12760 · streamlit/streamlit

mayagbarnes · 2025-10-10T21:20:07Z

Describe your changes

Part 3 of Custom Dark Theme Feature
PR handles the FE logic to take the newly formed themeInput from the new session proto message (example below), create a merged themeInput with the proper section inheritance, and then create custom theme(s).

# Theme configs provided by BE
    {
        "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...
    }

Custom theme creation:
- If light or dark section properties provided, 2 custom themes are created -> "Custom Theme Light" and "Custom Theme Dark".
- If other custom theme properties provided (no light or dark section properties) 1 custom theme is created -> "Custom Theme"
Section inheritance/merge (from lower to higher precedence):
- Main theme: theme < theme.light/dark
- Sidebar theme: theme < theme.light/dark < theme.sidebar < theme.light/dark.sidebar

Testing Plan

JS Unit Tests: ✅ Added
Manual Testing: ✅
E2E Tests: See last PR in stack

snyk-io · 2025-10-10T21:20:17Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Licenses	0	0	0	0	0 issues
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

mayagbarnes · 2025-10-10T21:20:22Z

This stack of pull requests is managed by Graphite. Learn more about stacking.

github-actions · 2025-10-10T21:20:25Z

✅ PR preview is ready!

Name	Link
📦 Wheel file	https://core-previews.s3-us-west-2.amazonaws.com/pr-12760/streamlit-1.50.0-py3-none-any.whl
📦 `@streamlit/component-v2-lib`	Download from artifacts
🕹️ Preview app	pr-12760.streamlit.app (☁️ Deploy here if not accessible)

github-actions · 2025-10-10T21:34:29Z

📈 Frontend coverage change detected

The frontend unit test (vitest) coverage has increased by 0.0300%

Current PR: 84.8300% (48227 lines, 7313 missed)
Latest develop: 84.8000% (48140 lines, 7313 missed)

🎉 Great job on improving test coverage!

📊 View detailed coverage comparison

frontend/app/src/App.test.tsx

Copilot

Pull Request Overview

Implements frontend logic for Custom Dark Theme feature (part 3): merges nested theme inputs (light/dark and sidebar), generates appropriate custom theme variants, and centralizes sidebar theme creation.

Adds utilities to merge theme sections with correct precedence and create custom light/dark themes.
Moves and consolidates sidebar theme creation into lib.
Introduces getSystemThemePreference and updates App to select the initial custom theme based on system preference.

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
frontend/lib/src/theme/utils.ts	Adds custom theme merging utilities, sidebar theme creation, and system theme preference helper.
frontend/lib/src/theme/utils.test.ts	Adds extensive unit tests for custom theme creation and sidebar theming.
frontend/lib/src/index.ts	Re-exports new theme utilities and constants.
frontend/app/src/components/Sidebar/ThemedSidebar.tsx	Refactors to use centralized createSidebarTheme from lib.
frontend/app/src/components/Sidebar/ThemedSidebar.test.tsx	Updates imports to use the centralized sidebar theme factory.
frontend/app/src/App.tsx	Integrates new custom theme creation and selects default variant based on system preference.
frontend/app/src/App.test.tsx	Adds tests for selecting light/dark custom theme based on system preference.

frontend/lib/src/theme/utils.ts

frontend/app/src/App.tsx

frontend/lib/src/theme/utils.ts

kmcgrady

Overall, the logic makes sense. I gave a couple non-blocking ideas for readability. Definitely look up the lodash merge as it can be really powerful here, but there are some gotchas to consider (how it handles arrays for example). I don't know the shape of the theme config, so please just double check if it would work well.

frontend/app/src/App.tsx

frontend/lib/src/theme/utils.ts

kmcgrady · 2025-10-17T01:38:46Z

frontend/lib/src/theme/utils.ts

+    "Sidebar",
+    {
+      ...activeTheme.themeInput, // Use the theme props from the main theme as basis
+      // @ts-expect-error - baseTheme is not null


Why is this error being thrown?

This exists because of a mismatch between protobuf types and TypeScript's Partial type.
base is an optional field, which protobuf uses null for (so can be base | null | undefined), but TypeScript's Partial expects base | undefined.
When I spread ...activeTheme.themeInput, TypeScript preserves the possibility that properties could be null, even when I've explicitly set base: baseTheme

**Part 5 of Custom Dark Theme Feature** **Resolves section merge** issue introduced with updating to lodash merge in #12760 - Use `mergeWith` instead to handle protobuf defaults - Have sidebar theme creation also use `mergeWith` **Adds e2e tests** for `theme.light` and `theme.dark` configurations * Light/Dark e2e tests: Test precedence between `[theme]` & `[theme.light/dark]` configs * Sidebar light/dark e2e tests: Test precedence between `[theme.light/dark]`, `[theme.sidebar]`, & `[theme.light/dark.sidebar]` configs

mayagbarnes mentioned this pull request Oct 10, 2025

Separate font handling in useThemeManager #12759

Merged

mayagbarnes added impact:users PR changes affect end users change:feature PR contains new feature or enhancement implementation security-assessment-completed labels Oct 10, 2025 — with Graphite App

mayagbarnes changed the title ~~process new sections~~ Custom Dark Theme Oct 10, 2025

mayagbarnes changed the title ~~Custom Dark Theme~~ Custom Dark Theme - main & sidebar themes incorporate section properties Oct 10, 2025

mayagbarnes changed the title ~~Custom Dark Theme - main & sidebar themes incorporate section properties~~ Custom Dark Theme - theme & sidebar theme creation Oct 10, 2025

mayagbarnes mentioned this pull request Oct 10, 2025

Custom Dark Theme - main & settings menu updates #12761

Merged

sfc-gh-mbarnes force-pushed the custom-dark-theme-fe-1 branch from 2d8dfca to fac9e6b Compare October 11, 2025 00:03

sfc-gh-mbarnes force-pushed the custom-dark-theme-fe-2 branch from 3266a92 to b4327a2 Compare October 11, 2025 00:03

mayagbarnes marked this pull request as ready for review October 15, 2025 16:33

mayagbarnes requested a review from Copilot October 15, 2025 16:33

graphite-app bot reviewed Oct 15, 2025

View reviewed changes

frontend/app/src/App.test.tsx Outdated Show resolved Hide resolved

Copilot AI reviewed Oct 15, 2025

View reviewed changes

frontend/lib/src/theme/utils.ts Outdated Show resolved Hide resolved

frontend/lib/src/theme/utils.ts Outdated Show resolved Hide resolved

frontend/app/src/App.tsx Show resolved Hide resolved

frontend/lib/src/theme/utils.ts Show resolved Hide resolved

sfc-gh-mbarnes force-pushed the custom-dark-theme-fe-1 branch from fac9e6b to 1da7156 Compare October 16, 2025 19:15

sfc-gh-mbarnes force-pushed the custom-dark-theme-fe-2 branch 2 times, most recently from 7f6da10 to f90316c Compare October 16, 2025 21:59

sfc-gh-mbarnes force-pushed the custom-dark-theme-fe-1 branch from 1da7156 to d1bd138 Compare October 16, 2025 21:59

mayagbarnes mentioned this pull request Oct 16, 2025

Custom Dark Theme - section updates & e2e tests #12798

Merged

kmcgrady approved these changes Oct 17, 2025

View reviewed changes

Base automatically changed from custom-dark-theme-fe-1 to develop October 17, 2025 17:32

mayagbarnes added 3 commits October 17, 2025 10:36

process new sections

aa85d7a

Address comments/nits

ea5b39d

Address PR comments p2

f64a0ec

sfc-gh-mbarnes force-pushed the custom-dark-theme-fe-2 branch from f90316c to f64a0ec Compare October 17, 2025 18:56

mayagbarnes merged commit 7319923 into develop Oct 17, 2025
38 checks passed

mayagbarnes deleted the custom-dark-theme-fe-2 branch October 17, 2025 19:51

github-actions bot mentioned this pull request Dec 9, 2025

Theme selection (Light/Dark) does not persist across reloads in Streamlit 1.51 #13280

Closed

4 tasks

Conversation

mayagbarnes commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes

Testing Plan

Uh oh!

snyk-io bot commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

mayagbarnes commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ PR preview is ready!

Uh oh!

github-actions bot commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📈 Frontend coverage change detected

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kmcgrady left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kmcgrady Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

mayagbarnes Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mayagbarnes commented Oct 10, 2025 •

edited

Loading

snyk-io bot commented Oct 10, 2025 •

edited

Loading

mayagbarnes commented Oct 10, 2025 •

edited

Loading

github-actions bot commented Oct 10, 2025 •

edited

Loading

github-actions bot commented Oct 10, 2025 •

edited

Loading