feat: per-page theming

src/components/PageWrapper.tsx

@@ -1,24 +1,32 @@
+import { Theme } from '@radix-ui/themes';
 import { ComponentProps } from 'react';
 
+interface PageWrapperProps extends ComponentProps<'div'> {
+  color?: ComponentProps<typeof Theme>['accentColor'];
+}
+
 export default function PageWrapper({
   style,
+  color,
   ...props
-}: ComponentProps<'div'>) {
+}: PageWrapperProps) {
   return (
-    <div
-      style={{
-        width: '100%',
-        maxWidth: 800,
-        margin: 'auto',
-        display: 'flex',
-        padding: 16,
-        flexDirection: 'column',
-        gap: 16,
-        boxSizing: 'border-box',
+    <Theme accentColor={color}>
+      <div
+        style={{
+          width: '100%',
+          maxWidth: 800,
+          margin: 'auto',
+          display: 'flex',
+          padding: 16,
+          flexDirection: 'column',
+          gap: 16,
+          boxSizing: 'border-box',
 
-        ...style,
-      }}
-      {...props}
-    />
+          ...style,
+        }}
+        {...props}
+      />
+    </Theme>
   );
 }