dark theme for site

packages/site/src/components/Editor.tsx

···
 export function Editor({ value, onChange, onReady }: EditorProps) {
 	const [isReady, setIsReady] = useState(false);
 	const monaco = useMonaco();
+	const [theme, setTheme] = useState<"vs-light" | "vs-dark">(
+		window.matchMedia("(prefers-color-scheme: dark)").matches
+			? "vs-dark"
+			: "vs-light",
+	);
+
+	useEffect(() => {
+		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		const handleChange = (e: MediaQueryListEvent) => {
+			setTheme(e.matches ? "vs-dark" : "vs-light");
+		};
+		mediaQuery.addEventListener("change", handleChange);
+		return () => mediaQuery.removeEventListener("change", handleChange);
+	}, []);
 
 	useEffect(() => {
 		if (!monaco) return;
···
 				<div
 					style={{
 						padding: "0.75rem 1rem",
-						backgroundColor: "#f9fafb",
-						borderBottom: "1px solid #e5e7eb",
+						backgroundColor: "var(--color-bg-secondary)",
+						borderBottom: "1px solid var(--color-border)",
 						fontSize: "0.875rem",
 						fontWeight: "600",
-						color: "#374151",
+						color: "var(--color-text-secondary)",
 					}}
 				>
 					Input
···
 			<div
 				style={{
 					padding: "0.75rem 1rem",
-					backgroundColor: "#f9fafb",
-					borderBottom: "1px solid #e5e7eb",
+					backgroundColor: "var(--color-bg-secondary)",
+					borderBottom: "1px solid var(--color-border)",
 					fontSize: "0.875rem",
 					fontWeight: "600",
-					color: "#374151",
+					color: "var(--color-text-secondary)",
 				}}
 			>
 				Input
···
 					path="file:///main.ts"
 					value={value}
 					onChange={(value) => onChange(value || "")}
-					theme="vs-light"
+					theme={theme}
 					options={{
 						minimap: { enabled: false },
 						fontSize: 14,

packages/site/src/components/Header.tsx

···
 		<header
 			style={{
 				padding: "2rem 2rem 1rem 2rem",
-				borderBottom: "1px solid #e5e7eb",
+				borderBottom: "1px solid var(--color-border)",
 			}}
 		>
 			<div style={{ maxWidth: "1400px", margin: "0 auto" }}>
···
 								marginBottom: "0.5rem",
 							}}
 						>
-							<span style={{ color: "#6b7280" }}>at://</span>prototypey
+							<span style={{ color: "var(--color-text-secondary)" }}>
+								at://
+							</span>
+							prototypey
 						</h1>
 						<p
 							style={{
 								fontSize: "1.125rem",
-								color: "#6b7280",
+								color: "var(--color-text-secondary)",
 								marginTop: "0.5rem",
 							}}
 						>
···
 							target="_blank"
 							rel="noopener noreferrer"
 							style={{
-								color: "#111827",
+								color: "var(--color-text-heading)",
 								textDecoration: "none",
 								fontSize: "1rem",
 								fontWeight: "600",
···
 							target="_blank"
 							rel="noopener noreferrer"
 							style={{
-								color: "#111827",
+								color: "var(--color-text-heading)",
 								textDecoration: "none",
 								fontSize: "1rem",
 								fontWeight: "600",

packages/site/src/components/OutputPanel.tsx

···
 import MonacoEditor from "@monaco-editor/react";
+import { useEffect, useState } from "react";
 
 interface OutputPanelProps {
 	output: {
···
 }
 
 export function OutputPanel({ output }: OutputPanelProps) {
+	const [theme, setTheme] = useState<"vs-light" | "vs-dark">(
+		window.matchMedia("(prefers-color-scheme: dark)").matches
+			? "vs-dark"
+			: "vs-light",
+	);
+
+	useEffect(() => {
+		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		const handleChange = (e: MediaQueryListEvent) => {
+			setTheme(e.matches ? "vs-dark" : "vs-light");
+		};
+		mediaQuery.addEventListener("change", handleChange);
+		return () => mediaQuery.removeEventListener("change", handleChange);
+	}, []);
+
 	return (
 		<div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
 			<div
 				style={{
 					padding: "0.75rem 1rem",
-					backgroundColor: "#f9fafb",
-					borderBottom: "1px solid #e5e7eb",
+					backgroundColor: "var(--color-bg-secondary)",
+					borderBottom: "1px solid var(--color-border)",
 					fontSize: "0.875rem",
 					fontWeight: "600",
-					color: "#374151",
+					color: "var(--color-text-secondary)",
 				}}
 			>
 				Output
···
 					<div
 						style={{
 							padding: "1rem",
-							color: "#dc2626",
-							backgroundColor: "#fef2f2",
+							color: "var(--color-error)",
+							backgroundColor: "var(--color-error-bg)",
 							height: "100%",
 							overflow: "auto",
 						}}
···
 						height="100%"
 						defaultLanguage="json"
 						value={output.json}
-						theme="vs-light"
+						theme={theme}
 						options={{
 							readOnly: true,
 							minimap: { enabled: false },

packages/site/src/components/Playground.tsx

···
 	null;
 
 export function Playground() {
-	// Use URL state with compression for code
 	const [compressedCode, setCompressedCode] = useQueryState(
 		"code",
 		parseAsString.withDefault(""),
 	);
 
-	// Decompress code from URL or use default
 	const initialCode =
 		compressedCode && compressedCode.trim() !== ""
 			? LZString.decompressFromEncodedURIComponent(compressedCode) ||
···
 	const [code, setCode] = useState(initialCode);
 	const [output, setOutput] = useState({ json: "", typeInfo: "", error: "" });
 	const [editorReady, setEditorReady] = useState(false);
+	const [theme, setTheme] = useState<"vs-light" | "vs-dark">(
+		window.matchMedia("(prefers-color-scheme: dark)").matches
+			? "vs-dark"
+			: "vs-light",
+	);
 	const monaco = useMonaco();
 	const tsWorkerRef =
 		useRef<Monaco.languages.typescript.TypeScriptWorker | null>(null);
···
 	};
 
 	useEffect(() => {
+		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		const handleChange = (e: MediaQueryListEvent) => {
+			setTheme(e.matches ? "vs-dark" : "vs-light");
+		};
+		mediaQuery.addEventListener("change", handleChange);
+		return () => mediaQuery.removeEventListener("change", handleChange);
+	}, []);
+
+	useEffect(() => {
 		if (monaco && editorReady && !tsWorkerRef.current && !tsWorkerInstance) {
 			const initWorker = async () => {
 				try {
···
 					style={{
 						flex: 1,
 						display: "flex",
-						borderRight: "1px solid #e5e7eb",
+						borderRight: "1px solid var(--color-border)",
 					}}
 				>
 					<Editor
···
 			>
 				<div
 					style={{
-						backgroundColor: "#f9fafb",
+						backgroundColor: "var(--color-bg-secondary)",
 						padding: "1rem",
 						borderRadius: "0.5rem",
 						marginBottom: "1rem",
 						textAlign: "center",
-						color: "#6b7280",
+						color: "var(--color-text-secondary)",
 						fontSize: "0.875rem",
 					}}
 				>
 					Playground available on desktop
 				</div>
 
-				<MobileStaticDemo code={code} json={output.json} />
+				<MobileStaticDemo code={code} json={output.json} theme={theme} />
 			</div>
 		</>
 	);
···
 	return indentedLines.join("\n");
 }
 
-function MobileStaticDemo({ code, json }: { code: string; json: string }) {
+function MobileStaticDemo({
+	code,
+	json,
+	theme,
+}: {
+	code: string;
+	json: string;
+	theme: "vs-light" | "vs-dark";
+}) {
 	// Calculate line counts to size editors appropriately
 	const codeLines = code.split("\n").length;
 	const jsonLines = json.split("\n").length;
···
 				<div
 					style={{
 						padding: "0.75rem 1rem",
-						backgroundColor: "#f9fafb",
-						borderBottom: "1px solid #e5e7eb",
+						backgroundColor: "var(--color-bg-secondary)",
+						borderBottom: "1px solid var(--color-border)",
 						fontSize: "0.875rem",
 						fontWeight: "600",
-						color: "#374151",
+						color: "var(--color-text-secondary)",
 						borderTopLeftRadius: "0.5rem",
 						borderTopRightRadius: "0.5rem",
 					}}
···
 				</div>
 				<div
 					style={{
-						border: "1px solid #e5e7eb",
+						border: "1px solid var(--color-border)",
 						borderTop: "none",
 						borderBottomLeftRadius: "0.5rem",
 						borderBottomRightRadius: "0.5rem",
···
 						height={`${codeWrappedLines * 18 + 32}px`}
 						defaultLanguage="typescript"
 						value={code}
-						theme="vs-light"
+						theme={theme}
 						options={{
 							readOnly: true,
 							minimap: { enabled: false },
···
 				<div
 					style={{
 						padding: "0.75rem 1rem",
-						backgroundColor: "#f9fafb",
-						borderBottom: "1px solid #e5e7eb",
+						backgroundColor: "var(--color-bg-secondary)",
+						borderBottom: "1px solid var(--color-border)",
 						fontSize: "0.875rem",
 						fontWeight: "600",
-						color: "#374151",
+						color: "var(--color-text-secondary)",
 						borderTopLeftRadius: "0.5rem",
 						borderTopRightRadius: "0.5rem",
 					}}
···
 				</div>
 				<div
 					style={{
-						border: "1px solid #e5e7eb",
+						border: "1px solid var(--color-border)",
 						borderTop: "none",
 						borderBottomLeftRadius: "0.5rem",
 						borderBottomRightRadius: "0.5rem",
···
 						height={`${jsonWrappedLines * 18 + 32}px`}
 						defaultLanguage="json"
 						value={json}
-						theme="vs-light"
+						theme={theme}
 						options={{
 							readOnly: true,
 							minimap: { enabled: false },

packages/site/src/index.css

···
 		"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	line-height: 1.5;
 	font-weight: 400;
-	color: #213547;
-	background-color: #ffffff;
 	font-synthesis: none;
 	text-rendering: optimizeLegibility;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
+
+	--color-text: #213547;
+	--color-text-secondary: #6b7280;
+	--color-text-heading: #111827;
+	--color-bg: #ffffff;
+	--color-bg-secondary: #f9fafb;
+	--color-border: #e5e7eb;
+	--color-error: #dc2626;
+	--color-error-bg: #fef2f2;
+
+	color: var(--color-text);
+	background-color: var(--color-bg);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--color-text: #e5e7eb;
+		--color-text-secondary: #9ca3af;
+		--color-text-heading: #f9fafb;
+		--color-bg: #111827;
+		--color-bg-secondary: #1f2937;
+		--color-border: #374151;
+		--color-error: #f87171;
+		--color-error-bg: #3f1f1f;
+	}
 }
 
 body {