Set CSS variables via JavaScript to prevent external CSS override

The external client.css was overriding our inline CSS variable definitions
because it loaded after our inline <style> tag. Both had the same specificity
(:root selector), so cascade order determined the winner.

By setting CSS variables via JavaScript using setProperty(), we create inline
styles on the html element which have higher specificity than any CSS selector
(equivalent to style="--text-color: #f5f9ff"). This ensures the variables are
set correctly before the external CSS loads and cannot be overridden.

This fixes the black-text-on-dark-background issue while still allowing user
inline styles to override colors on specific elements.

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

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

Author: claude

website/src/components/code-preview.ts

@@ -26,7 +26,16 @@ function generateJavaScriptIFrameHTML(
 						: "light"
 					);
 
-				if (colorScheme !== "dark") {
+				// Set CSS variables as inline styles - these have higher specificity
+				// than external CSS and will not be overridden
+				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) {
 					document.documentElement.classList.add("color-scheme-light");
 				}
 			</script>