feat(appearance): add composable theme package

packages/appearance/src/use-resolved-theme.ts

@@ -0,0 +1,32 @@
+import React from "react"
+import { usePreference } from "@workspace/preferences"
+
+import type { ThemeMode } from "./preferences"
+import type { ThemeScheme } from "./theme"
+
+const systemThemeQuery = "(prefers-color-scheme: dark)"
+
+function subscribeToSystemTheme(listener: VoidFunction) {
+  const mediaQuery = window.matchMedia(systemThemeQuery)
+  mediaQuery.addEventListener("change", listener)
+  return () => mediaQuery.removeEventListener("change", listener)
+}
+
+function getSystemTheme(): ThemeScheme {
+  return window.matchMedia(systemThemeQuery).matches ? "dark" : "light"
+}
+
+function getServerSystemTheme(): ThemeScheme {
+  return "light"
+}
+
+export function useResolvedTheme(): ThemeScheme {
+  const themeMode: ThemeMode = usePreference("theme-mode")[0]
+  const systemTheme = React.useSyncExternalStore(
+    subscribeToSystemTheme,
+    getSystemTheme,
+    getServerSystemTheme
+  )
+
+  return themeMode === "system" ? systemTheme : themeMode
+}