theming

src/lib/components/ThemeWrapper.tsx

@@ -2,11 +2,34 @@
 
 import '@radix-ui/themes/styles.css';
 import { Theme } from "@radix-ui/themes";
+import { useEffect, useState } from 'react';
 
 export default function ThemeWrapper({
   children,
 }: {
   children: React.ReactNode
 }) {
-  return <Theme>{children}</Theme>;
+  const [dark, setDark] = useState(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
-}
+
+  // Automatically respond to theme changes
+  useEffect(() => {
+    const onThemeChange = (event: MediaQueryListEvent) => {
+      setDark(event.matches);
+    };
+
+    let match = window.matchMedia('(prefers-color-scheme: dark)');
+    match.addEventListener('change', onThemeChange);
+
+    return () => match.removeEventListener('change', onThemeChange);
+  });
+
+  return <Theme
+    accentColor='ruby'
+    grayColor='mauve'
+    radius='large'
+    scaling='95%'
+    appearance={dark ? 'dark' : 'light'}
+  >
+    {children}
+  </Theme>;
+};