Faster time-to-theme (#109)

src-web/hooks/usePreferredAppearance.ts

@@ -1,18 +1,9 @@
 import { useEffect, useState } from 'react';
 import type { Appearance } from '../lib/theme/appearance';
-import {
-  getCSSAppearance,
-  getWindowAppearance,
-  subscribeToWindowAppearanceChange,
-} from '../lib/theme/appearance';
+import { getCSSAppearance, subscribeToPreferredAppearance } from '../lib/theme/appearance';
 
 export function usePreferredAppearance() {
   const [preferredAppearance, setPreferredAppearance] = useState<Appearance>(getCSSAppearance());
-
-  useEffect(() => {
-    getWindowAppearance().then(setPreferredAppearance);
-    return subscribeToWindowAppearanceChange(setPreferredAppearance);
-  }, []);
-
+  useEffect(() => subscribeToPreferredAppearance(setPreferredAppearance), []);
   return preferredAppearance;
 }

src-web/hooks/useResolvedAppearance.ts

@@ -1,14 +1,9 @@
+import { resolveAppearance } from '../lib/theme/appearance';
 import { usePreferredAppearance } from './usePreferredAppearance';
 import { useSettings } from './useSettings';
 
 export function useResolvedAppearance() {
   const preferredAppearance = usePreferredAppearance();
-
   const settings = useSettings();
-  const appearance =
-    settings == null || settings?.appearance === 'system'
-      ? preferredAppearance
-      : settings.appearance;
-
-  return appearance;
+  return resolveAppearance(preferredAppearance, settings.appearance);
 }

src-web/hooks/useResolvedTheme.ts

@@ -1,20 +1,14 @@
-import { isThemeDark } from '../lib/theme/window';
-import { useResolvedAppearance } from './useResolvedAppearance';
+import { getResolvedTheme } from '../lib/theme/themes';
+import { usePreferredAppearance } from './usePreferredAppearance';
 import { useSettings } from './useSettings';
-import { useThemes } from './useThemes';
 
 export function useResolvedTheme() {
-  const appearance = useResolvedAppearance();
+  const preferredAppearance = usePreferredAppearance();
   const settings = useSettings();
-  const { themes, fallback } = useThemes();
-
-  const darkThemes = themes.filter((t) => isThemeDark(t));
-  const lightThemes = themes.filter((t) => !isThemeDark(t));
-
-  const dark = darkThemes.find((t) => t.id === settings?.themeDark) ?? fallback.dark;
-  const light = lightThemes.find((t) => t.id === settings?.themeLight) ?? fallback.light;
-
-  const active = appearance === 'dark' ? dark : light;
-
-  return { dark, light, active };
+  return getResolvedTheme(
+    preferredAppearance,
+    settings.appearance,
+    settings.themeLight,
+    settings.themeDark,
+  );
 }

src-web/hooks/useSyncThemeToDocument.ts

@@ -1,23 +0,0 @@
-import { emit } from '@tauri-apps/api/event';
-import { useEffect } from 'react';
-import type { YaakTheme } from '../lib/theme/window';
-import { addThemeStylesToDocument, setThemeOnDocument } from '../lib/theme/window';
-import { useResolvedTheme } from './useResolvedTheme';
-
-export function useSyncThemeToDocument() {
-  const theme = useResolvedTheme();
-
-  useEffect(() => {
-    setThemeOnDocument(theme.active);
-    emitBgChange(theme.active);
-  }, [theme.active]);
-
-  useEffect(() => {
-    addThemeStylesToDocument(theme.active);
-  }, [theme.active]);
-}
-
-function emitBgChange(t: YaakTheme) {
-  if (t.surface == null) return;
-  emit('yaak_bg_changed', t.surface.hexNoAlpha()).catch(console.error);
-}

src-web/hooks/useThemes.ts

@@ -1,13 +0,0 @@
-import { defaultDarkTheme, defaultLightTheme, yaakThemes } from '../lib/theme/themes';
-
-export function useThemes() {
-  const dark = defaultDarkTheme;
-  const light = defaultLightTheme;
-
-  const otherThemes = yaakThemes
-    .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 } };
-}