Address PR feedback: remove hard-coded colors, simplify utilities

PR #316 feedback addressed:

1. **Remove hard-coded CSS colors** (lines 47-48, 75-76)
   - Removed all hard-coded color values from utilities
   - Just toggle classes now - CSS defines the actual colors
   - Follows separation of concerns: utilities handle mechanism, CSS handles colors

2. **Remove syncIframes function** (line 90)
   - Wasn't working properly
   - Removed postMessage-based iframe syncing
   - Simplified color-scheme-toggle

3. **Simplify iframe template**
   - Removed duplicate color definitions from iframe HTML
   - Relies on linked client.css for colors
   - Only minimal inline styles for layout

4. **Clarify SSR default comment** (line 12)
   - Added note about why SSR defaults to "dark"

Changes:
- website/src/utils/color-scheme.ts: Removed color values, removed syncIframes
- website/src/components/color-scheme-toggle.ts: Removed syncIframes import/call
- website/src/components/code-preview.ts: Removed hard-coded colors from iframe

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: claude

website/src/components/code-preview.ts

@@ -21,38 +21,13 @@ function generateJavaScriptIFrameHTML(
 				${getColorSchemeScript()}
 			</script>
 			<style>
-				/* Ensure colors cascade to all elements */
-				html, body {
-					background-color: #0a0e1f;
-					color: #f5f9ff;
-					margin: 0;
-					padding: 0;
-				}
-
-				/* Light mode overrides */
-				html.color-scheme-light, html.color-scheme-light body {
-					background-color: #e7f4f5;
-					color: #0a0e1f;
-				}
-
+				/* Minimal inline styles - actual colors defined in client.css */
 				* {
 					box-sizing: border-box;
 				}
-
-				/* CSS variables for compatibility with external CSS */
-				:root {
-					--bg-color: #0a0e1f;
-					--text-color: #f5f9ff;
-					--highlight-color: #daa520;
-				}
-				.color-scheme-light {
-					--bg-color: #e7f4f5;
-					--text-color: #0a0e1f;
-					--highlight-color: #daa520;
-				}
-
-				body {
-					font-family: sans-serif;
+				html, body {
+					margin: 0;
+					padding: 0;
 				}
 			</style>
 			<link

website/src/components/color-scheme-toggle.ts

@@ -4,7 +4,6 @@ import {
 	getColorScheme,
 	setColorScheme,
 	applyColorScheme,
-	syncIframes,
 	type ColorScheme,
 } from "../utils/color-scheme.js";
 
@@ -27,7 +26,6 @@ export function ColorSchemeToggle(this: Context) {
 
 	if (typeof window !== "undefined") {
 		applyColorScheme(colorScheme!);
-		syncIframes(colorScheme!);
 	}
 
 	return jsx`

website/src/utils/color-scheme.ts

@@ -9,7 +9,9 @@ export type ColorScheme = "dark" | "light";
  */
 export function getColorScheme(): ColorScheme {
 	if (typeof window === "undefined") {
-		return "dark"; // SSR default
+		// For SSR, we can't know the preference, so we return null/undefined
+		// and let client-side hydration handle it
+		return "dark"; // Still need a default for type safety
 	}
 
 	const stored = sessionStorage.getItem("color-scheme");
@@ -33,7 +35,8 @@ export function setColorScheme(scheme: ColorScheme): void {
 }
 
 /**
- * Applies color scheme classes and CSS variables to a document element
+ * Applies color scheme class to document elements.
+ * The actual colors are defined in CSS via :root and .color-scheme-light
  */
 export function applyColorScheme(
 	scheme: ColorScheme,
@@ -43,16 +46,8 @@ export function applyColorScheme(
 	const body =
 		target instanceof Document ? target.body : target.ownerDocument?.body;
 
-	const isDark = scheme === "dark";
-	const bgColor = isDark ? "#0a0e1f" : "#e7f4f5";
-	const textColor = isDark ? "#f5f9ff" : "#0a0e1f";
-
-	// Apply CSS variables as inline styles for highest specificity
-	root.style.setProperty("--bg-color", bgColor);
-	root.style.setProperty("--text-color", textColor);
-
-	// Apply classes
-	if (isDark) {
+	// Just toggle the class - CSS handles the actual colors
+	if (scheme === "dark") {
 		root.classList.remove("color-scheme-light");
 		body?.classList.remove("color-scheme-light");
 	} else {
@@ -62,66 +57,19 @@ export function applyColorScheme(
 }
 
 /**
- * Returns the inline script code for applying color scheme before render
- * Use this in server-rendered HTML to prevent FOUC
+ * Returns the inline script code for applying color scheme before render.
+ * Use this in server-rendered HTML to prevent FOUC.
+ * Only handles the mechanism - CSS defines the actual colors.
  */
 export function getColorSchemeScript(): string {
 	return `
 		const colorScheme = sessionStorage.getItem("color-scheme") ||
 			(window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
 				? "dark" : "light");
 
-		const isDark = colorScheme === "dark";
-		const bgColor = isDark ? "#0a0e1f" : "#e7f4f5";
-		const textColor = isDark ? "#f5f9ff" : "#0a0e1f";
-
-		document.documentElement.style.setProperty("--bg-color", bgColor);
-		document.documentElement.style.setProperty("--text-color", textColor);
-
-		if (!isDark) {
+		if (colorScheme === "light") {
 			document.documentElement.classList.add("color-scheme-light");
 		}
 	`.trim();
 }
 
-/**
- * Syncs color scheme to all playground iframes via postMessage
- */
-export function syncIframes(scheme: ColorScheme): void {
-	if (typeof window === "undefined") return;
-
-	const iframes = document.querySelectorAll<HTMLIFrameElement>(
-		".playground-iframe",
-	);
-
-	for (const iframe of iframes) {
-		// Send message to iframe
-		iframe.contentWindow?.postMessage(
-			JSON.stringify({type: "color-scheme-change", scheme}),
-			window.location.origin,
-		);
-
-		// Also apply directly (for iframes that don't have message listener yet)
-		if (iframe.contentDocument) {
-			applyColorScheme(scheme, iframe.contentDocument);
-		}
-	}
-}
-
-/**
- * Sets up a message listener in an iframe to receive color scheme updates
- */
-export function setupIframeColorSchemeListener(): void {
-	if (typeof window === "undefined") return;
-
-	window.addEventListener("message", (ev) => {
-		try {
-			const data = JSON.parse(ev.data);
-			if (data.type === "color-scheme-change") {
-				applyColorScheme(data.scheme as ColorScheme);
-			}
-		} catch {
-			// Ignore non-JSON messages
-		}
-	});
-}