feat: let users choose which themes apply in automatic light/dark mode (#2732)

When the automatic theme is selected, two dropdowns now appear in the
theme picker letting users independently configure which theme resolves
for light mode and which resolves for dark mode, instead of always
defaulting to ui-light / ui-dark.

Preferences are persisted under core.appearance.lightThemeName and
core.appearance.darkThemeName and react to config changes immediately.

Author: Jayphen

app/internal_packages/theme-picker/lib/theme-picker.tsx

@@ -2,12 +2,34 @@ import React from 'react';
 
 import { Flexbox, ScrollRegion } from 'mailspring-component-kit';
 import { localized } from 'mailspring-exports';
+import {
+  AUTOMATIC_THEME_NAME,
+  LIGHT_THEME_NAME,
+  DARK_THEME_NAME,
+} from '../../../src/theme-manager';
 import ThemeOption, { toSelector } from './theme-option';
 import { Disposable } from 'event-kit';
 
+// Sort order for built-in themes; community themes not in this list sort last.
+const INTERNAL_THEME_ORDER = [
+  'ui-less-is-more',
+  'ui-ubuntu',
+  'ui-taiga',
+  'ui-darkside',
+  DARK_THEME_NAME,
+  LIGHT_THEME_NAME,
+  AUTOMATIC_THEME_NAME,
+];
+
+function sortThemes<T extends { name: string }>(themes: T[]): T[] {
+  return [...themes].sort(
+    (a, b) => (INTERNAL_THEME_ORDER.indexOf(a.name) - INTERNAL_THEME_ORDER.indexOf(b.name)) * -1
+  );
+}
+
 class ThemePicker extends React.Component<
   Record<string, unknown>,
-  { themes: any[]; activeTheme: string }
+  { themes: any[]; activeTheme: string; lightTheme: string; darkTheme: string }
 > {
   static displayName = 'ThemePicker';
 
@@ -33,6 +55,8 @@ class ThemePicker extends React.Component<
     return {
       themes: this.themes.getAvailableThemes(),
       activeTheme: this.themes.getActiveThemeSetting().name,
+      lightTheme: this.themes.getConfiguredLightThemeName(),
+      darkTheme: this.themes.getConfiguredDarkThemeName(),
     };
   }
 
@@ -42,6 +66,16 @@ class ThemePicker extends React.Component<
     this._rewriteIFrame(prevActiveTheme, theme);
   }
 
+  _setLightTheme(themeName: string) {
+    this.themes.setLightTheme(themeName);
+    this.setState({ lightTheme: themeName });
+  }
+
+  _setDarkTheme(themeName: string) {
+    this.themes.setDarkTheme(themeName);
+    this.setState({ darkTheme: themeName });
+  }
+
   _rewriteIFrame(prevActiveTheme: string, activeTheme: string) {
     const activeFrame = document.querySelector(`.${toSelector(activeTheme)}`) as HTMLIFrameElement;
     const prevActiveFrame = document.querySelector(
@@ -62,20 +96,7 @@ class ThemePicker extends React.Component<
   }
 
   _renderThemeOptions() {
-    const internalThemes = [
-      'ui-less-is-more',
-      'ui-ubuntu',
-      'ui-taiga',
-      'ui-darkside',
-      'ui-dark',
-      'ui-light',
-      'ui-automatic',
-    ];
-    const sortedThemes = [...this.state.themes];
-    sortedThemes.sort((a, b) => {
-      return (internalThemes.indexOf(a.name) - internalThemes.indexOf(b.name)) * -1;
-    });
-    return sortedThemes.map((theme) => (
+    return sortThemes(this.state.themes).map((theme) => (
       <ThemeOption
         key={theme.name}
         theme={theme}
@@ -85,6 +106,46 @@ class ThemePicker extends React.Component<
     ));
   }
 
+  _renderAutoSlots() {
+    if (this.state.activeTheme !== AUTOMATIC_THEME_NAME) return null;
+
+    const sorted = sortThemes(this.state.themes.filter((t) => t.name !== AUTOMATIC_THEME_NAME));
+
+    return (
+      <div className="auto-theme-selectors">
+        <div className="auto-theme-selector">
+          <label>
+            <span className="auto-theme-icon">☀</span>
+            {localized('When light')}
+          </label>
+          <select
+            value={this.state.lightTheme}
+            onChange={(e) => this._setLightTheme(e.target.value)}
+          >
+            {sorted.map((t) => (
+              <option key={t.name} value={t.name}>
+                {t.displayName}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="auto-theme-selector">
+          <label>
+            <span className="auto-theme-icon">☾</span>
+            {localized('When dark')}
+          </label>
+          <select value={this.state.darkTheme} onChange={(e) => this._setDarkTheme(e.target.value)}>
+            {sorted.map((t) => (
+              <option key={t.name} value={t.name}>
+                {t.displayName}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+    );
+  }
+
   render() {
     return (
       <div className="theme-picker">
@@ -94,6 +155,7 @@ class ThemePicker extends React.Component<
             {localized('Click any theme to apply:')}
           </div>
           <ScrollRegion style={{ margin: '10px 5px 0 5px', height: '300px' }}>
+            {this._renderAutoSlots()}
             <Flexbox
               direction="row"
               height="auto"

app/internal_packages/theme-picker/styles/theme-picker.less

@@ -19,6 +19,37 @@
       z-index: 0;
     }
   }
+  .auto-theme-selectors {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: @padding-base-horizontal;
+    padding: 0 @padding-base-horizontal @padding-base-vertical;
+
+    .auto-theme-selector {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 4px;
+
+      label {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 11px;
+        color: @text-color-very-subtle;
+        cursor: default;
+      }
+
+      select {
+        width: 100%;
+        font-size: @font-size-smaller;
+      }
+    }
+  }
+
   .create-theme {
     width: 100%;
     text-align: center;

app/src/theme-manager.ts

@@ -8,10 +8,12 @@ import PackageManager from './package-manager';
 
 const CONFIG_THEME_KEY = 'core.theme';
 const CONFIG_USE_SYSTEM_ACCENT_KEY = 'core.appearance.useSystemAccent';
+const CONFIG_LIGHT_THEME_KEY = 'core.appearance.lightThemeName';
+const CONFIG_DARK_THEME_KEY = 'core.appearance.darkThemeName';
 const SYSTEM_ACCENT_SOURCE_PATH = 'system-accent:dynamic';
-const AUTOMATIC_THEME_NAME = 'ui-automatic';
-const LIGHT_THEME_NAME = 'ui-light';
-const DARK_THEME_NAME = 'ui-dark';
+export const AUTOMATIC_THEME_NAME = 'ui-automatic';
+export const LIGHT_THEME_NAME = 'ui-light';
+export const DARK_THEME_NAME = 'ui-dark';
 
 function buildSystemAccentCSS(color: string): string {
   return `:root {
@@ -69,6 +71,12 @@ export default class ThemeManager {
 
     AppEnv.config.onDidChange(CONFIG_THEME_KEY, () => this.updateThemePackageAndRecomputeLESS());
     AppEnv.config.onDidChange(CONFIG_USE_SYSTEM_ACCENT_KEY, () => this.applySystemAccent());
+    AppEnv.config.onDidChange(CONFIG_LIGHT_THEME_KEY, () => {
+      if (this.isAutomaticModeSelected()) this.updateThemePackageAndRecomputeLESS();
+    });
+    AppEnv.config.onDidChange(CONFIG_DARK_THEME_KEY, () => {
+      if (this.isAutomaticModeSelected()) this.updateThemePackageAndRecomputeLESS();
+    });
 
     ipcRenderer.on('system-accent-color-changed', (_event, color: string | null) => {
       this._systemAccentColor = color;
@@ -158,12 +166,30 @@ export default class ThemeManager {
     }
     const configured = this.getConfiguredThemeName();
     if (configured === AUTOMATIC_THEME_NAME) {
-      const resolvedName = this._systemDarkMode ? DARK_THEME_NAME : LIGHT_THEME_NAME;
+      const resolvedName = this._systemDarkMode
+        ? this.getConfiguredDarkThemeName()
+        : this.getConfiguredLightThemeName();
       return this.packageManager.getPackageNamed(resolvedName) || this.getBaseTheme();
     }
     return this.packageManager.getPackageNamed(configured) || this.getBaseTheme();
   }
 
+  getConfiguredLightThemeName(): string {
+    return AppEnv.config.get(CONFIG_LIGHT_THEME_KEY) || LIGHT_THEME_NAME;
+  }
+
+  getConfiguredDarkThemeName(): string {
+    return AppEnv.config.get(CONFIG_DARK_THEME_KEY) || DARK_THEME_NAME;
+  }
+
+  setLightTheme(packageName: string) {
+    AppEnv.config.set(CONFIG_LIGHT_THEME_KEY, packageName);
+  }
+
+  setDarkTheme(packageName: string) {
+    AppEnv.config.set(CONFIG_DARK_THEME_KEY, packageName);
+  }
+
   // Returns the theme the user selected, which may be "ui-automatic" (unresolved).
   getActiveThemeSetting() {
     if (this.baseThemeOnly) {