Faster time-to-theme (#109)

src-web/lib/theme/appearance.ts

@@ -18,7 +18,9 @@ export async function getWindowAppearance(): Promise<Appearance> {
 export function subscribeToWindowAppearanceChange(
   cb: (appearance: Appearance) => void,
 ): () => void {
-  const container = { unsubscribe: () => {} };
+  const container = {
+    unsubscribe: () => {},
+  };
 
   getCurrentWebviewWindow()
     .onThemeChanged((t) => {
@@ -30,3 +32,17 @@ export function subscribeToWindowAppearanceChange(
 
   return () => container.unsubscribe();
 }
+
+export function resolveAppearance(
+  preferredAppearance: Appearance,
+  appearanceSetting: string,
+): Appearance {
+  const appearance = appearanceSetting === 'system' ? preferredAppearance : appearanceSetting;
+  return appearance === 'dark' ? 'dark' : 'light';
+}
+
+export function subscribeToPreferredAppearance(cb: (a: Appearance) => void) {
+  cb(getCSSAppearance());
+  getWindowAppearance().then(cb);
+  subscribeToWindowAppearanceChange(cb);
+}

src-web/lib/theme/themes.ts

@@ -1,3 +1,5 @@
+import type { Appearance } from './appearance';
+import { resolveAppearance } from './appearance';
 import { catppuccin } from './themes/catppuccin';
 import { github } from './themes/github';
 import { hotdogStand } from './themes/hotdog-stand';
@@ -5,11 +7,12 @@ import { monokaiPro } from './themes/monokai-pro';
 import { relaxing } from './themes/relaxing';
 import { rosePine } from './themes/rose-pine';
 import { yaak, yaakDark, yaakLight } from './themes/yaak';
+import { isThemeDark } from './window';
 
 export const defaultDarkTheme = yaakDark;
 export const defaultLightTheme = yaakLight;
 
-export const yaakThemes = [
+const allThemes = [
   ...yaak,
   ...catppuccin,
   ...relaxing,
@@ -18,3 +21,35 @@ export const yaakThemes = [
   ...monokaiPro,
   ...hotdogStand,
 ];
+
+export function getThemes() {
+  const dark = defaultDarkTheme;
+  const light = defaultLightTheme;
+
+  const otherThemes = allThemes
+    .filter((t) => t.id !== dark.id && t.id !== light.id)
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+  const themes = [dark, light, ...otherThemes];
+  return { themes, fallback: { dark, light } };
+}
+
+export function getResolvedTheme(
+  preferredAppearance: Appearance,
+  appearanceSetting: string,
+  themeLight: string,
+  themeDark: string,
+) {
+  const appearance = resolveAppearance(preferredAppearance, appearanceSetting);
+  const { themes, fallback } = getThemes();
+
+  const darkThemes = themes.filter((t) => isThemeDark(t));
+  const lightThemes = themes.filter((t) => !isThemeDark(t));
+
+  const dark = darkThemes.find((t) => t.id === themeDark) ?? fallback.dark;
+  const light = lightThemes.find((t) => t.id === themeLight) ?? fallback.light;
+
+  const active = appearance === 'dark' ? dark : light;
+
+  return { dark, light, active };
+}