[codex] add system appearance theme selection

public/locales/en.json

@@ -1399,6 +1399,15 @@
   "settings.overlay_scheme_light": "Light Mode (saturated overlays)",
   "settings.theme_label": "Color Theme",
   "settings.theme_description": "Choose from 15 themes including accessibility-focused options",
+  "settings.appearance_mode_label": "Appearance Mode",
+  "settings.appearance_mode_description": "Choose a fixed appearance or follow your browser and operating system setting",
+  "settings.appearance_mode_system": "Match system appearance",
+  "settings.appearance_mode_dark": "Dark",
+  "settings.appearance_mode_light": "Light",
+  "settings.dark_theme_label": "Dark Theme",
+  "settings.dark_theme_description": "Theme used when appearance is set to Dark or the system is in dark mode",
+  "settings.light_theme_label": "Light Theme",
+  "settings.light_theme_description": "Theme used when appearance is set to Light or the system is in light mode",
   "settings.theme_catppuccin": "Catppuccin",
   "settings.theme_mocha": "Mocha (Dark)",
   "settings.theme_macchiato": "Macchiato (Medium-Dark)",
@@ -2558,6 +2567,12 @@
   "theme_management.built_in": "Built-in",
   "theme_management.active": "Active",
   "theme_management.apply": "Apply",
+  "theme_management.apply_dark": "Apply as Dark",
+  "theme_management.apply_light": "Apply as Light",
+  "theme_management.dark_active": "Dark Active",
+  "theme_management.light_active": "Light Active",
+  "theme_management.assigned_dark": "Dark",
+  "theme_management.assigned_light": "Light",
   "theme_management.clone": "Clone",
 
   "theme_editor.edit_title": "Edit Theme",

src/components/CustomThemeManagement.css

@@ -120,14 +120,32 @@
   width: fit-content;
 }
 
+.theme-assignment-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.assignment-badge {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  background: var(--ctp-blue);
+  color: var(--ctp-crust);
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: var(--radius-sm);
+  width: fit-content;
+}
+
 .theme-card-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 0.5rem;
   align-items: center;
 }
 
 .btn-apply {
-  flex: 1;
+  flex: 1 1 120px;
   padding: 0.5rem 1rem;
   background: var(--ctp-blue);
   color: var(--ctp-crust);

src/components/CustomThemeManagement.test.tsx

@@ -0,0 +1,110 @@
+/**
+ * Tests for custom theme assignment actions.
+ *
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CustomThemeManagement } from './CustomThemeManagement';
+
+const setDarkTheme = vi.fn();
+const setLightTheme = vi.fn();
+const setAppearanceMode = vi.fn();
+const loadCustomThemes = vi.fn();
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+vi.mock('../contexts/SettingsContext', () => ({
+  useSettings: () => ({
+    customThemes: [
+      {
+        id: 1,
+        name: 'Storm',
+        slug: 'custom-storm',
+        definition: JSON.stringify({
+          base: '#111111',
+          text: '#eeeeee',
+          blue: '#89b4fa',
+          green: '#a6e3a1',
+          yellow: '#f9e2af',
+          red: '#f38ba8',
+        }),
+        is_builtin: 0,
+        created_at: 1,
+        updated_at: 1,
+      },
+    ],
+    loadCustomThemes,
+    theme: 'mocha',
+    appearanceMode: 'system',
+    darkTheme: 'mocha',
+    lightTheme: 'latte',
+    setDarkTheme,
+    setLightTheme,
+    setAppearanceMode,
+  }),
+}));
+
+vi.mock('../contexts/AuthContext', () => ({
+  useAuth: () => ({
+    authStatus: {
+      permissions: {
+        global: {
+          themes: {
+            write: true,
+          },
+        },
+      },
+    },
+  }),
+}));
+
+vi.mock('../contexts/CsrfContext', () => ({
+  useCsrf: () => ({
+    getToken: () => 'csrf-token',
+  }),
+}));
+
+vi.mock('../services/api', () => ({
+  default: {
+    getBaseUrl: vi.fn().mockResolvedValue(''),
+  },
+}));
+
+vi.mock('./ThemeEditor', () => ({
+  ThemeEditor: () => <div data-testid="theme-editor" />,
+}));
+
+describe('CustomThemeManagement', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('applies a custom theme as the dark theme without changing light theme or mode', async () => {
+    const user = userEvent.setup();
+    render(<CustomThemeManagement />);
+
+    await user.click(screen.getByRole('button', { name: 'theme_management.apply_dark' }));
+
+    expect(setDarkTheme).toHaveBeenCalledWith('custom-storm');
+    expect(setLightTheme).not.toHaveBeenCalled();
+    expect(setAppearanceMode).not.toHaveBeenCalled();
+  });
+
+  it('applies a custom theme as the light theme without changing dark theme or mode', async () => {
+    const user = userEvent.setup();
+    render(<CustomThemeManagement />);
+
+    await user.click(screen.getByRole('button', { name: 'theme_management.apply_light' }));
+
+    expect(setLightTheme).toHaveBeenCalledWith('custom-storm');
+    expect(setDarkTheme).not.toHaveBeenCalled();
+    expect(setAppearanceMode).not.toHaveBeenCalled();
+  });
+});

src/components/CustomThemeManagement.tsx

@@ -9,7 +9,7 @@ import './CustomThemeManagement.css';
 
 export const CustomThemeManagement: React.FC = () => {
   const { t } = useTranslation();
-  const { customThemes, loadCustomThemes, theme, setTheme } = useSettings();
+  const { customThemes, loadCustomThemes, theme, darkTheme, lightTheme, setDarkTheme, setLightTheme } = useSettings();
   const { authStatus } = useAuth();
   const { getToken: getCsrfToken } = useCsrf();
 
@@ -101,19 +101,17 @@ export const CustomThemeManagement: React.FC = () => {
       return;
     }
 
-    // If we deleted the active theme, switch to mocha
-    if (theme === themeSlug) {
-      setTheme('mocha');
+    if (darkTheme === themeSlug) {
+      setDarkTheme('mocha');
+    }
+    if (lightTheme === themeSlug) {
+      setLightTheme('latte');
     }
 
     // Reload themes
     await loadCustomThemes();
   };
 
-  const handleApply = (themeSlug: string) => {
-    setTheme(themeSlug);
-  };
-
   if (isEditorOpen) {
     return (
       <ThemeEditor
@@ -155,9 +153,11 @@ export const CustomThemeManagement: React.FC = () => {
             <ThemeCard
               key={customTheme.id}
               theme={customTheme}
-              isActive={theme === customTheme.slug}
+              isDarkTheme={darkTheme === customTheme.slug}
+              isLightTheme={lightTheme === customTheme.slug}
               canWrite={canWrite}
-              onApply={() => handleApply(customTheme.slug)}
+              onApplyDark={() => setDarkTheme(customTheme.slug)}
+              onApplyLight={() => setLightTheme(customTheme.slug)}
               onEdit={() => handleEdit(customTheme)}
               onClone={() => handleClone(customTheme)}
               onDelete={() => handleDelete(customTheme.slug)}
@@ -171,19 +171,23 @@ export const CustomThemeManagement: React.FC = () => {
 
 interface ThemeCardProps {
   theme: CustomTheme;
-  isActive: boolean;
+  isDarkTheme: boolean;
+  isLightTheme: boolean;
   canWrite: boolean;
-  onApply: () => void;
+  onApplyDark: () => void;
+  onApplyLight: () => void;
   onEdit: () => void;
   onClone: () => void;
   onDelete: () => void;
 }
 
 const ThemeCard: React.FC<ThemeCardProps> = ({
   theme,
-  isActive,
+  isDarkTheme,
+  isLightTheme,
   canWrite,
-  onApply,
+  onApplyDark,
+  onApplyLight,
   onEdit,
   onClone,
   onDelete
@@ -205,9 +209,10 @@ const ThemeCard: React.FC<ThemeCardProps> = ({
     definition.yellow,
     definition.red
   ].filter(Boolean);
+  const isAssigned = isDarkTheme || isLightTheme;
 
   return (
-    <div className={`theme-card ${isActive ? 'active' : ''}`}>
+    <div className={`theme-card ${isAssigned ? 'active' : ''}`}>
       <div className="theme-card-preview">
         <div className="color-preview-grid">
           {previewColors.map((color, i) => (
@@ -227,15 +232,29 @@ const ThemeCard: React.FC<ThemeCardProps> = ({
           {theme.is_builtin === 1 && (
             <span className="builtin-badge">{t('theme_management.built_in')}</span>
           )}
+          {isAssigned && (
+            <div className="theme-assignment-badges">
+              {isDarkTheme && <span className="assignment-badge">{t('theme_management.assigned_dark')}</span>}
+              {isLightTheme && <span className="assignment-badge">{t('theme_management.assigned_light')}</span>}
+            </div>
+          )}
         </div>
 
         <div className="theme-card-actions">
           <button
-            onClick={onApply}
-            className={`btn-apply ${isActive ? 'active' : ''}`}
-            disabled={isActive}
+            onClick={onApplyDark}
+            className={`btn-apply ${isDarkTheme ? 'active' : ''}`}
+            disabled={isDarkTheme}
+          >
+            {isDarkTheme ? t('theme_management.dark_active') : t('theme_management.apply_dark')}
+          </button>
+
+          <button
+            onClick={onApplyLight}
+            className={`btn-apply ${isLightTheme ? 'active' : ''}`}
+            disabled={isLightTheme}
           >
-            {isActive ? t('theme_management.active') : t('theme_management.apply')}
+            {isLightTheme ? t('theme_management.light_active') : t('theme_management.apply_light')}
           </button>
 
           {canWrite && !theme.is_builtin && (