A bunch more theme stuff

src-web/hooks/useResolvedTheme.ts

@@ -0,0 +1,20 @@
+import { isThemeDark } from '../lib/theme/window';
+import { useResolvedAppearance } from './useResolvedAppearance';
+import { useSettings } from './useSettings';
+import { useThemes } from './useThemes';
+
+export function useResolvedTheme() {
+  const appearance = useResolvedAppearance();
+  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 };
+}