Persist theme settings across restarts

Author: doodlewind

packages/app/src/main/index.ts

@@ -14,6 +14,7 @@ import { setupAutoUpdater, downloadUpdate, quitAndInstall } from './updater.js'
 import { openTerminal } from './terminal.js'
 import { getSessionResumeCommand } from '../shared/resumeCommand.js'
 import { resolveResumeWorkingDirectory } from './sessionResume.js'
+import { loadUIPreferences, saveThemeEditor, saveThemeSource } from './uiPreferences.js'
 import type Database from 'better-sqlite3'
 import type { SyncWorkerMessage } from './sync-worker.js'
 
@@ -24,6 +25,8 @@ if (customUserDataDir) {
 }
 // macOS menu bar shows the first menu's label as the app name
 app.setName(isDevMode ? 'Spool DEV' : 'Spool')
+const uiPreferences = loadUIPreferences()
+nativeTheme.themeSource = uiPreferences.themeSource
 let focusExistingWindow = () => {}
 
 const gotSingleInstanceLock = app.requestSingleInstanceLock()
@@ -320,7 +323,19 @@ ipcMain.handle('spool:get-theme', () => {
 })
 
 ipcMain.handle('spool:set-theme', (_e, { theme }: { theme: 'system' | 'light' | 'dark' }) => {
+  uiPreferences.themeSource = theme
   nativeTheme.themeSource = theme
+  saveThemeSource(theme)
+  return { ok: true }
+})
+
+ipcMain.handle('spool:get-theme-editor-state', () => {
+  return uiPreferences.themeEditor
+})
+
+ipcMain.handle('spool:set-theme-editor-state', (_e, { state }: { state: import('../renderer/theme/editorTypes.js').ThemeEditorStateV1 }) => {
+  uiPreferences.themeEditor = state
+  saveThemeEditor(state)
   return { ok: true }
 })
 

packages/app/src/main/uiPreferences.ts

@@ -0,0 +1,56 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { homedir } from 'node:os'
+import {
+  normalizeThemeEditorState,
+  type ThemeEditorStateV1,
+  type ThemeSource,
+} from '../renderer/theme/editorTypes.js'
+
+interface UIConfigFile {
+  themeSource?: unknown
+  themeEditor?: unknown
+}
+
+const UI_CONFIG_PATH = join(homedir(), '.spool', 'ui.json')
+
+export interface UIPreferences {
+  themeSource: ThemeSource
+  themeEditor: ThemeEditorStateV1 | null
+}
+
+function normalizeThemeSource(raw: unknown): ThemeSource {
+  return raw === 'light' || raw === 'dark' || raw === 'system' ? raw : 'system'
+}
+
+function readUIConfig(): UIConfigFile {
+  try {
+    if (!existsSync(UI_CONFIG_PATH)) return {}
+    return JSON.parse(readFileSync(UI_CONFIG_PATH, 'utf8')) as UIConfigFile
+  } catch {
+    return {}
+  }
+}
+
+function writeUIConfig(config: UIConfigFile): void {
+  mkdirSync(join(homedir(), '.spool'), { recursive: true })
+  writeFileSync(UI_CONFIG_PATH, JSON.stringify(config, null, 2), 'utf8')
+}
+
+export function loadUIPreferences(): UIPreferences {
+  const config = readUIConfig()
+  return {
+    themeSource: normalizeThemeSource(config.themeSource),
+    themeEditor: normalizeThemeEditorState(config.themeEditor),
+  }
+}
+
+export function saveThemeSource(themeSource: ThemeSource): void {
+  const config = readUIConfig()
+  writeUIConfig({ ...config, themeSource })
+}
+
+export function saveThemeEditor(themeEditor: ThemeEditorStateV1): void {
+  const config = readUIConfig()
+  writeUIConfig({ ...config, themeEditor })
+}

packages/app/src/preload/index.ts

@@ -1,6 +1,7 @@
 import { contextBridge, ipcRenderer } from 'electron'
 import type { FragmentResult, Session, Message, StatusInfo, SyncResult, SearchResult, ConnectorStatus, AuthStatus, SchedulerStatus } from '@spool/core'
 import type { SearchSortOrder } from '../shared/searchSort.js'
+import type { ThemeEditorStateV1 } from '../renderer/theme/editorTypes.js'
 
 export interface AgentInfo {
   id: string
@@ -122,6 +123,12 @@ const api = {
   setTheme: (theme: 'system' | 'light' | 'dark'): Promise<{ ok: boolean }> =>
     ipcRenderer.invoke('spool:set-theme', { theme }),
 
+  getThemeEditorState: (): Promise<ThemeEditorStateV1 | null> =>
+    ipcRenderer.invoke('spool:get-theme-editor-state'),
+
+  setThemeEditorState: (state: ThemeEditorStateV1): Promise<{ ok: boolean }> =>
+    ipcRenderer.invoke('spool:set-theme-editor-state', { state }),
+
   // ── Connectors ──
 
   connectors: {

packages/app/src/renderer/theme/editorTypes.ts

@@ -2,6 +2,7 @@
 
 export const THEME_EDITOR_STORAGE_KEY = 'spool_theme_editor'
 export const LEGACY_DARK_PALETTE_KEY = 'spool_dark_palette'
+export type ThemeSource = 'system' | 'light' | 'dark'
 
 export interface ThemeSideConfig {
   /** Last selected preset; switches to `custom` when user edits colors. */
@@ -30,6 +31,47 @@ export type ThemePresetId = (typeof THEME_PRESETS)[number]
 export const LIGHT_PRESETS = THEME_PRESETS
 export const DARK_PRESETS = THEME_PRESETS
 
+const KNOWN_PRESETS = new Set<string>(THEME_PRESETS)
+
+export function normalizePresetId(raw: string): string {
+  const preset = raw === 'forest' ? 'everforest' : raw
+  return KNOWN_PRESETS.has(preset) ? preset : 'custom'
+}
+
+export function normalizeThemeSide(
+  partial: Partial<ThemeSideConfig> | undefined,
+  fallback: ThemeSideConfig,
+): ThemeSideConfig {
+  if (!partial || typeof partial !== 'object') return { ...fallback }
+
+  const presetRaw = typeof partial.preset === 'string' ? partial.preset : fallback.preset
+  return {
+    preset: normalizePresetId(presetRaw),
+    accent: typeof partial.accent === 'string' ? partial.accent : fallback.accent,
+    background: typeof partial.background === 'string' ? partial.background : fallback.background,
+    foreground: typeof partial.foreground === 'string' ? partial.foreground : fallback.foreground,
+    uiFont: typeof partial.uiFont === 'string' ? partial.uiFont : fallback.uiFont,
+    codeFont: typeof partial.codeFont === 'string' ? partial.codeFont : fallback.codeFont,
+    translucentChrome: typeof partial.translucentChrome === 'boolean' ? partial.translucentChrome : fallback.translucentChrome,
+    contrast: typeof partial.contrast === 'number' && Number.isFinite(partial.contrast)
+      ? Math.max(0, Math.min(100, Math.round(partial.contrast)))
+      : fallback.contrast,
+  }
+}
+
+export function normalizeThemeEditorState(raw: unknown): ThemeEditorStateV1 | null {
+  if (!raw || typeof raw !== 'object') return null
+  const record = raw as Record<string, unknown>
+  if (record['v'] !== 1) return null
+
+  const defaults = defaultThemeEditorState()
+  return {
+    v: 1,
+    light: normalizeThemeSide(record['light'] as Partial<ThemeSideConfig> | undefined, defaults.light),
+    dark: normalizeThemeSide(record['dark'] as Partial<ThemeSideConfig> | undefined, defaults.dark),
+  }
+}
+
 export function defaultLightSide(): ThemeSideConfig {
   return {
     preset: 'spool',

packages/app/src/renderer/theme/persist.ts

@@ -3,70 +3,46 @@ import {
   type ThemeSideConfig,
   THEME_EDITOR_STORAGE_KEY,
   LEGACY_DARK_PALETTE_KEY,
-  THEME_PRESETS,
   defaultThemeEditorState,
+  normalizeThemeEditorState,
+  normalizeThemeSide,
 } from './editorTypes.js'
 import { darkPresetSeed } from './presetSeeds.js'
 
-const KNOWN_PRESETS = new Set<string>(THEME_PRESETS)
-
-function normalizePresetId(raw: string): string {
-  const p = raw === 'forest' ? 'everforest' : raw
-  return KNOWN_PRESETS.has(p) ? p : 'custom'
-}
-
-export function normalizeSide(partial: Partial<ThemeSideConfig> | undefined, fallback: ThemeSideConfig): ThemeSideConfig {
-  if (!partial || typeof partial !== 'object') return { ...fallback }
-  const presetRaw = typeof partial.preset === 'string' ? partial.preset : fallback.preset
-  return {
-    preset: normalizePresetId(presetRaw),
-    accent: typeof partial.accent === 'string' ? partial.accent : fallback.accent,
-    background: typeof partial.background === 'string' ? partial.background : fallback.background,
-    foreground: typeof partial.foreground === 'string' ? partial.foreground : fallback.foreground,
-    uiFont: typeof partial.uiFont === 'string' ? partial.uiFont : fallback.uiFont,
-    codeFont: typeof partial.codeFont === 'string' ? partial.codeFont : fallback.codeFont,
-    translucentChrome: typeof partial.translucentChrome === 'boolean' ? partial.translucentChrome : fallback.translucentChrome,
-    contrast: typeof partial.contrast === 'number' && Number.isFinite(partial.contrast)
-      ? Math.max(0, Math.min(100, Math.round(partial.contrast)))
-      : fallback.contrast,
-  }
-}
-
-export function normalizeThemeEditorState(raw: unknown): ThemeEditorStateV1 | null {
-  if (!raw || typeof raw !== 'object') return null
-  const o = raw as Record<string, unknown>
-  if (o['v'] !== 1) return null
-  const base = defaultThemeEditorState()
-  return {
-    v: 1,
-    light: normalizeSide(o['light'] as Partial<ThemeSideConfig>, base.light),
-    dark: normalizeSide(o['dark'] as Partial<ThemeSideConfig>, base.dark),
-  }
-}
-
 /** Merge loose import (e.g. partial JSON) onto current state. */
 export function mergeThemeImportLoose(raw: unknown, current: ThemeEditorStateV1): ThemeEditorStateV1 | null {
   if (!raw || typeof raw !== 'object') return null
   const o = raw as Record<string, unknown>
   const next: ThemeEditorStateV1 = {
     v: 1,
-    light: normalizeSide((o['light'] as Partial<ThemeSideConfig>) ?? {}, current.light),
-    dark: normalizeSide((o['dark'] as Partial<ThemeSideConfig>) ?? {}, current.dark),
+    light: normalizeThemeSide((o['light'] as Partial<ThemeSideConfig>) ?? {}, current.light),
+    dark: normalizeThemeSide((o['dark'] as Partial<ThemeSideConfig>) ?? {}, current.dark),
   }
   return next
 }
 
 export async function loadThemeEditorState(): Promise<ThemeEditorStateV1> {
   try {
-    const raw = window.localStorage.getItem(THEME_EDITOR_STORAGE_KEY)
-    if (raw) {
-      const parsed = normalizeThemeEditorState(JSON.parse(raw))
+    const stored = await window.spool?.getThemeEditorState?.()
+    if (stored) {
+      const parsed = normalizeThemeEditorState(stored)
       if (parsed) return parsed
     }
+
+    const rawLocal = window.localStorage.getItem(THEME_EDITOR_STORAGE_KEY)
+    if (rawLocal) {
+      const parsed = normalizeThemeEditorState(JSON.parse(rawLocal))
+      if (parsed) {
+        await window.spool?.setThemeEditorState?.(parsed)
+        return parsed
+      }
+    }
+
     const next = defaultThemeEditorState()
     const legacy = window.localStorage.getItem(LEGACY_DARK_PALETTE_KEY)
     if (legacy === 'forest') {
       next.dark = darkPresetSeed('everforest', next.dark)
+      await window.spool?.setThemeEditorState?.(next)
     }
     return next
   } catch {
@@ -76,4 +52,5 @@ export async function loadThemeEditorState(): Promise<ThemeEditorStateV1> {
 
 export async function saveThemeEditorState(state: ThemeEditorStateV1): Promise<void> {
   window.localStorage.setItem(THEME_EDITOR_STORAGE_KEY, JSON.stringify(state))
+  await window.spool?.setThemeEditorState?.(state)
 }