More theme stuff

src-web/hooks/usePreferredAppearance.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import {
+  type Appearance,
+  getPreferredAppearance,
+  subscribeToPreferredAppearanceChange,
+} from '../lib/theme/window';
+
+export function usePreferredAppearance() {
+  const [preferredAppearance, setPreferredAppearance] = useState<Appearance>();
+
+  // Set appearance when preferred theme changes
+  useEffect(() => {
+    getPreferredAppearance().then(setPreferredAppearance);
+    return subscribeToPreferredAppearanceChange(setPreferredAppearance);
+  }, []);
+
+  return preferredAppearance;
+}

src-web/hooks/useResolvedAppearance.ts

@@ -1,17 +1,8 @@
-import { useEffect, useState } from 'react';
-import type { Appearance } from '../lib/theme/window';
-import { getPreferredAppearance, subscribeToPreferredAppearanceChange } from '../lib/theme/window';
+import { usePreferredAppearance } from './usePreferredAppearance';
 import { useSettings } from './useSettings';
 
 export function useResolvedAppearance() {
-  const [preferredAppearance, setPreferredAppearance] = useState<Appearance>(
-    getPreferredAppearance(),
-  );
-
-  // Set appearance when preferred theme changes
-  useEffect(() => {
-    return subscribeToPreferredAppearanceChange(setPreferredAppearance);
-  }, []);
+  const preferredAppearance = usePreferredAppearance();
 
   const settings = useSettings();
   const appearance =
@@ -19,5 +10,7 @@ export function useResolvedAppearance() {
       ? preferredAppearance
       : settings.appearance;
 
+  console.log('HELLO', settings?.appearance, preferredAppearance);
+
   return appearance;
 }