Custom Dark Theme - main & settings menu updates (streamlit#12761)

**Part 4 of Custom Dark Theme Feature** 
This PR does the following:
1. **Adds auto custom theme** - like we do for streamlit default themes
* Theme selector shows `"Use System Setting"`, `"Light"`, & `"Dark"` for
streamlit default themes & custom themes (where a light & dark version
are configured) and allows navigation between them as expected.
* First step in decoupling system settings from default vs custom themes
- setting stage for app menu & theme caching updates
2. **Update theme selection in the Settings Menu**

If `light`/`dark` section configuration (2 custom themes, 1 auto theme)
* We select the `activeTheme` between `Custom Theme Light` and `Custom
Theme Dark` based on user system preference and create an `Auto` theme
with that preferred theme.
* We allow the user to choose between these custom themes (`"Use System
Setting"`, `"Light"`, & `"Dark"`) in the settings menu (remove streamlit
default themes as options)
    
If NO `light`/`dark` section configurations (1 custom theme, no auto
theme necessary)
    * We set the `activeTheme` to `"Custom Theme"`
* We don't allow the user a choice of theme - theme selector is disabled
and just displays `"Custom Theme"` (remove streamlit default themes as
options)

3. **Fixes the Main Menu** (which did not apply custom theme font)

Author: mayagbarnes

e2e_playwright/__snapshots__/linux/custom_theme_fonts_test/custom_fonts_main_menu[chromium].png

@@ -67,6 +67,19 @@ def test_custom_theme(app: Page, assert_snapshot: ImageCompareFunction):
     assert_snapshot(app, name="custom_fonts_app", image_threshold=0.0003)
 
 
+@pytest.mark.usefixtures("configure_custom_fonts")
+def test_custom_theme_main_menu(app: Page, assert_snapshot: ImageCompareFunction):
+    """Test that the main menu is rendered correctly with a custom theme (uses configured font)."""
+    # Make sure that all elements are rendered and no skeletons are shown:
+    expect_no_skeletons(app, timeout=25000)
+
+    # Open the main menu
+    app.get_by_test_id("stMainMenu").click()
+
+    element = app.get_by_test_id("stMainMenuPopover")
+    assert_snapshot(element, name="custom_fonts_main_menu")
+
+
 @pytest.mark.usefixtures("configure_custom_fonts")
 def test_custom_theme_settings_dialog(app: Page, assert_snapshot: ImageCompareFunction):
     """Test that the settings dialog is rendered correctly with a custom theme."""

e2e_playwright/__snapshots__/linux/custom_theme_fonts_test/custom_fonts_main_menu[firefox].png

@@ -37,13 +37,13 @@ import {
   mockEndpoints,
 } from "@streamlit/connection"
 import {
+  CUSTOM_THEME_AUTO_NAME,
   CUSTOM_THEME_DARK_NAME,
   CUSTOM_THEME_LIGHT_NAME,
   CUSTOM_THEME_NAME,
   FileUploadClient,
   getDefaultTheme,
   getHostSpecifiedTheme,
-  getSystemThemePreference,
   HOST_COMM_VERSION,
   HostCommunicationManager,
   isEmbed,
@@ -98,7 +98,6 @@ vi.mock("@streamlit/lib", async () => {
     ...actualLib,
     isEmbed: vi.fn(),
     isToolbarDisplayed: vi.fn(),
-    getSystemThemePreference: vi.fn(),
   }
 })
 
@@ -1924,6 +1923,74 @@ describe("App", () => {
   })
 
   describe("App.processThemeInput", () => {
+    it("passing a custom theme adds the custom theme and removes preset themes", () => {
+      // Simplest custom theme (no light/dark versions)
+      const themeInput = new CustomThemeConfig({
+        primaryColor: "blue",
+      })
+
+      const props = getProps()
+      renderApp(props)
+
+      sendForwardMessage("newSession", {
+        ...NEW_SESSION_JSON,
+        customTheme: themeInput,
+      })
+
+      // Custom theme should be added
+      expect(props.theme.addThemes).toHaveBeenCalledTimes(1)
+      // Should have exactly one theme with name CUSTOM_THEME_NAME, and keepPresetThemes should be false
+      expect(props.theme.addThemes).toHaveBeenCalledWith(
+        [expect.objectContaining({ name: CUSTOM_THEME_NAME })],
+        expect.objectContaining({ keepPresetThemes: false })
+      )
+      // Active theme should be set to the custom theme
+      expect(props.theme.setTheme).toHaveBeenCalledWith(
+        expect.objectContaining({ name: CUSTOM_THEME_NAME })
+      )
+    })
+
+    it("passing a custom theme with light/dark versions adds both and removes preset themes", () => {
+      const themeInput = new CustomThemeConfig({
+        primaryColor: "blue",
+        light: {
+          primaryColor: "red",
+        },
+        dark: {
+          primaryColor: "green",
+        },
+      })
+
+      const props = getProps()
+      renderApp(props)
+
+      sendForwardMessage("newSession", {
+        ...NEW_SESSION_JSON,
+        customTheme: themeInput,
+      })
+
+      // Check that 3 themes were added (light, dark, auto)
+      expect(props.theme.addThemes).toHaveBeenCalledTimes(1)
+      expect(props.theme.addThemes).toHaveBeenCalledWith(
+        [
+          expect.objectContaining({ name: CUSTOM_THEME_LIGHT_NAME }),
+          expect.objectContaining({ name: CUSTOM_THEME_DARK_NAME }),
+          expect.objectContaining({ name: CUSTOM_THEME_AUTO_NAME }),
+        ],
+        expect.objectContaining({ keepPresetThemes: false })
+      )
+
+      // Active theme should be set to the auto theme
+      expect(props.theme.setTheme).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: CUSTOM_THEME_AUTO_NAME,
+          themeInput: expect.objectContaining({
+            primaryColor: "red",
+          }),
+        })
+      )
+    })
+
     it("calls setFonts when fontFaces are provided", () => {
       const fontFaces = [{ url: "test-url" }]
       const themeInput = new CustomThemeConfig({
@@ -2027,8 +2094,13 @@ describe("App", () => {
     })
 
     it("sets active theme based on system preference when theme input has light/dark configs - Custom Theme Light", () => {
-      // Mock the system preference return value
-      vi.mocked(getSystemThemePreference).mockReturnValue("light")
+      // Mock the system preference return value (light)
+      Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        value: vi.fn().mockImplementation(query => ({
+          matches: query === "(prefers-color-scheme: light)", // Returns true for light
+        })),
+      })
       const themeInput = new CustomThemeConfig({
         primaryColor: "blue",
         light: {
@@ -2048,16 +2120,25 @@ describe("App", () => {
       })
 
       expect(props.theme.addThemes).toHaveBeenCalledTimes(1)
+      // Check that the auto theme is set, and that it is the custom light theme
       expect(props.theme.setTheme).toHaveBeenCalledWith(
         expect.objectContaining({
-          name: CUSTOM_THEME_LIGHT_NAME,
+          name: CUSTOM_THEME_AUTO_NAME,
+          themeInput: expect.objectContaining({
+            primaryColor: "lightblue",
+          }),
         })
       )
     })
 
     it("sets active theme based on system preference when theme input has light/dark configs - Custom Theme Dark", () => {
-      // Mock the system preference return value
-      vi.mocked(getSystemThemePreference).mockReturnValue("dark")
+      // Mock the system preference return value (dark)
+      Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        value: vi.fn().mockImplementation(query => ({
+          matches: query === "(prefers-color-scheme: dark)", // Returns true for dark
+        })),
+      })
       const themeInput = new CustomThemeConfig({
         primaryColor: "blue",
         light: {
@@ -2077,9 +2158,13 @@ describe("App", () => {
       })
 
       expect(props.theme.addThemes).toHaveBeenCalledTimes(1)
+      // Check that the auto theme is set, and that it is the custom dark theme
       expect(props.theme.setTheme).toHaveBeenCalledWith(
         expect.objectContaining({
-          name: CUSTOM_THEME_DARK_NAME,
+          name: CUSTOM_THEME_AUTO_NAME,
+          themeInput: expect.objectContaining({
+            primaryColor: "darkblue",
+          }),
         })
       )
     })

e2e_playwright/__snapshots__/linux/custom_theme_fonts_test/custom_fonts_main_menu[webkit].png

@@ -64,6 +64,7 @@ import {
   createCustomThemes,
   createFormsData,
   createPresetThemes,
+  CUSTOM_THEME_AUTO_NAME,
   DeployedAppMetadata,
   ensureError,
   extractPageNameFromPathName,
@@ -76,7 +77,6 @@ import {
   getHostSpecifiedTheme,
   getIFrameEnclosingApp,
   getLocaleLanguage,
-  getSystemThemePreference,
   getTimezone,
   getTimezoneOffset,
   getUrl,
@@ -1324,24 +1324,23 @@ export class App extends PureComponent<Props, State> {
     const usingCustomTheme = !isPresetTheme(this.props.theme.activeTheme)
     if (themeInput) {
       // createCustomThemes can return either 1 theme ("Custom Theme")
-      // or 2 themes ("Custom Theme Light" and "Custom Theme Dark")
+      // or 3 themes ("Custom Theme Light", "Custom Theme Dark", and "Custom Theme Auto")
       const customThemes = createCustomThemes(themeInput)
 
-      // Add the themes to the theme manager
-      this.props.theme.addThemes(customThemes)
+      // Add the new custom themes to the theme manager and remove the preset themes
+      this.props.theme.addThemes(customThemes, { keepPresetThemes: false })
 
       const userPreference = getCachedTheme()
       if (userPreference === null || usingCustomTheme) {
-        // Update the theme to be customTheme either if the user hasn't set a
-        // preference (developer-provided custom themes should be the default
-        // for an app) or if a custom theme is currently active (to ensure that
-        // we pick up any new changes to it).
+        // If the user hasn't set a preference, or if a custom theme is currently active,
+        // update the theme to be a custom theme.
         if (customThemes.length > 1) {
-          // Decide between Custom Theme Light or Custom Theme Dark
-          // based on the user's system preference
-          const systemPreference = getSystemThemePreference()
-          const themeIndex = systemPreference === "dark" ? 1 : 0
-          this.setAndSendTheme(customThemes[themeIndex])
+          // When Custom Theme Light & Custom Theme Dark present, we create an auto theme based
+          // on the system preference and set this as the active theme
+          const autoThemeIndex = customThemes.findIndex(
+            theme => theme.name === CUSTOM_THEME_AUTO_NAME
+          )
+          this.setAndSendTheme(customThemes[autoThemeIndex])
         } else {
           // Set to singular Custom Theme
           this.setAndSendTheme(customThemes[0])

e2e_playwright/theming/custom_theme_fonts_test.py

@@ -162,8 +162,6 @@ export const StyledDevItem = styled.li<ItemStyleProps>(
 export const StyledMenuItemLabel = styled.span(({ theme }) => ({
   marginRight: theme.spacing.md,
   flexGrow: 1,
-  // We do not want to change the font for this based on theme.
-  fontFamily: theme.fonts.sansSerif,
 }))
 
 export const StyledMenuContainer = styled.div(({ theme }) => ({

frontend/app/src/App.test.tsx

@@ -21,7 +21,10 @@ import { userEvent } from "@testing-library/user-event"
 
 import { MetricsManager } from "@streamlit/app/src/MetricsManager"
 import {
+  AUTO_THEME_NAME,
   createPresetThemes,
+  CUSTOM_THEME_DARK_NAME,
+  CUSTOM_THEME_LIGHT_NAME,
   CUSTOM_THEME_NAME,
   customTheme,
   darkTheme,
@@ -30,12 +33,34 @@ import {
   mockSessionInfo,
   renderWithContexts,
   SessionInfo,
+  ThemeConfig,
 } from "@streamlit/lib"
 
 import { Props, SettingsDialog } from "./SettingsDialog"
 
 const mockSetTheme = vi.fn()
 
+export const autoCustomTheme: ThemeConfig = {
+  name: "Use system setting",
+  emotion: lightTheme.emotion,
+  basewebTheme: lightTheme.basewebTheme,
+  primitives: lightTheme.primitives,
+}
+
+const customThemeLight: ThemeConfig = {
+  name: "Custom Theme Light",
+  emotion: lightTheme.emotion,
+  basewebTheme: lightTheme.basewebTheme,
+  primitives: lightTheme.primitives,
+}
+
+const customThemeDark: ThemeConfig = {
+  name: "Custom Theme Dark",
+  emotion: darkTheme.emotion,
+  basewebTheme: darkTheme.basewebTheme,
+  primitives: darkTheme.primitives,
+}
+
 const getContext = (
   extend?: Partial<LibContextProps>
 ): Partial<LibContextProps> => ({
@@ -111,9 +136,10 @@ describe("SettingsDialog", () => {
     expect(screen.getByRole("combobox")).toBeVisible()
   })
 
-  it("if custom theme exists, only show custom theme as option & disable selectbox", () => {
-    const presetThemes = createPresetThemes()
-    const availableThemes = [...presetThemes, customTheme]
+  it("if single custom theme exists, only show Custom Theme as option & disable selectbox", () => {
+    // When single custom theme exists (no light/dark versions), this is the only option
+    // and the preset themes are removed from available themes
+    const availableThemes = [customTheme]
     const props = getProps()
     const context = getContext({ availableThemes, activeTheme: customTheme })
 
@@ -126,7 +152,67 @@ describe("SettingsDialog", () => {
     expect(screen.getByText(CUSTOM_THEME_NAME)).toBeVisible()
   })
 
-  it("should show custom theme does not exists", async () => {
+  it("if Custom Theme Light active, show correct active theme & light/dark/auto custom themes as options", async () => {
+    const user = userEvent.setup()
+    // When custom theme light & dark exist, also have auto theme
+    // and the preset themes are removed from available themes
+    const availableThemes = [
+      autoCustomTheme,
+      customThemeLight,
+      customThemeDark,
+    ]
+    const props = getProps()
+    const context = getContext({
+      availableThemes,
+      activeTheme: customThemeLight,
+    })
+
+    renderWithContexts(<SettingsDialog {...props} />, context)
+
+    // Correct selected theme is shown
+    expect(screen.getByText(CUSTOM_THEME_LIGHT_NAME)).toBeVisible()
+
+    const selectbox = screen.getByRole("combobox")
+    await user.click(selectbox)
+
+    // Should only show Auto (Use System Setting), Custom Theme Light and Custom Theme Dark as options
+    const options = screen.getAllByRole("option")
+    expect(options).toHaveLength(3)
+    expect(options[0]).toHaveTextContent(AUTO_THEME_NAME)
+    expect(options[1]).toHaveTextContent(CUSTOM_THEME_LIGHT_NAME)
+    expect(options[2]).toHaveTextContent(CUSTOM_THEME_DARK_NAME)
+  })
+
+  it("if Custom Theme Dark active, show correct active theme & light/dark/auto custom themes as options", async () => {
+    const user = userEvent.setup()
+    const availableThemes = [
+      autoCustomTheme,
+      customThemeLight,
+      customThemeDark,
+    ]
+    const props = getProps()
+    const context = getContext({
+      availableThemes,
+      activeTheme: customThemeDark,
+    })
+
+    renderWithContexts(<SettingsDialog {...props} />, context)
+
+    // Correct selected theme is shown
+    expect(screen.getByText(CUSTOM_THEME_DARK_NAME)).toBeVisible()
+
+    const selectbox = screen.getByRole("combobox")
+    await user.click(selectbox)
+
+    // Should only show Auto (Use System Setting), Custom Theme Light and Custom Theme Dark as options
+    const options = screen.getAllByRole("option")
+    expect(options).toHaveLength(3)
+    expect(options[0]).toHaveTextContent(AUTO_THEME_NAME)
+    expect(options[1]).toHaveTextContent(CUSTOM_THEME_LIGHT_NAME)
+    expect(options[2]).toHaveTextContent(CUSTOM_THEME_DARK_NAME)
+  })
+
+  it("should not show custom theme as option if it does not exist", async () => {
     const user = userEvent.setup()
     const presetThemes = createPresetThemes()
     const availableThemes = [...presetThemes]