v3: added multiple stylesheets, improved user profiles

src/contexts/ThemeContext.ts

@@ -0,0 +1,18 @@
+import { createContext } from "react";
+
+export type StyleName = "smooth" | "brutalist";
+export type ColorScheme = "auto" | "light" | "dark";
+
+export interface ThemeContextValue {
+  style: StyleName;
+  colorScheme: ColorScheme;
+  setStyle(s: StyleName): void;
+  setColorScheme(c: ColorScheme): void;
+}
+
+export const ThemeContext = createContext<ThemeContextValue>({
+  style: "smooth",
+  colorScheme: "auto",
+  setStyle: () => {},
+  setColorScheme: () => {},
+});

src/contexts/ThemeProvider.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+import {
+  type ColorScheme,
+  type StyleName,
+  ThemeContext,
+} from "./ThemeContext.ts";
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [style, setStyleState] = useState<StyleName>(() => {
+    const stored = localStorage.getItem("style");
+    // migrate legacy "default" value
+    if (stored === "default" || stored === null) return "smooth";
+    return stored as StyleName;
+  });
+  const [colorScheme, setColorSchemeState] = useState<ColorScheme>(
+    () =>
+      (localStorage.getItem("color-scheme") as ColorScheme | null) ?? "auto",
+  );
+
+  useEffect(() => {
+    const el = document.documentElement;
+    if (style === "smooth") {
+      el.removeAttribute("data-style");
+    } else {
+      el.setAttribute("data-style", style);
+    }
+    localStorage.setItem("style", style);
+  }, [style]);
+
+  useEffect(() => {
+    const el = document.documentElement;
+    if (colorScheme === "auto") {
+      el.removeAttribute("data-color-scheme");
+    } else {
+      el.setAttribute("data-color-scheme", colorScheme);
+    }
+    localStorage.setItem("color-scheme", colorScheme);
+  }, [colorScheme]);
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        style,
+        colorScheme,
+        setStyle: setStyleState,
+        setColorScheme: setColorSchemeState,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+}