fix: auto-detect theme for code block styling

- Add runtime theme detection to CodeBlock component
- Automatically use light theme when parent has light background
- Detect dark theme by checking for dark background classes
- Maintain explicit variant control for hero and light variants
- Fixes code block contrast issues when CSS doesn't load properly

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

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ryanrozich

src/demo/components/CodeBlock.tsx

@@ -44,6 +44,52 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
   variant = "default",
 }) => {
   const [copied, setCopied] = useState(false);
+  const [detectedTheme, setDetectedTheme] = useState<"light" | "dark">("dark");
+
+  // Detect the actual theme based on background
+  React.useEffect(() => {
+    if (variant !== "default") return;
+
+    const checkTheme = () => {
+      const body = document.body;
+      const computedStyle = window.getComputedStyle(body);
+      const bgColor = computedStyle.backgroundColor;
+
+      // Check if background is light
+      if (bgColor === "rgb(255, 255, 255)" || bgColor === "white") {
+        setDetectedTheme("light");
+      } else {
+        // Check the nearest parent with a background
+        let foundDarkBg = false;
+
+        // Look for elements with dark backgrounds
+        const darkElements = document.querySelectorAll(
+          ".bg-gray-950, .bg-gray-900, .min-h-screen",
+        );
+        darkElements.forEach((el) => {
+          const elBg = window.getComputedStyle(el).backgroundColor;
+          if (elBg && elBg !== "rgba(0, 0, 0, 0)" && elBg !== "transparent") {
+            // Parse RGB values
+            const match = elBg.match(/\d+/g);
+            if (match) {
+              const [r, g, b] = match.map(Number);
+              // If all values are low, it's a dark background
+              if (r < 50 && g < 50 && b < 50) {
+                foundDarkBg = true;
+              }
+            }
+          }
+        });
+
+        setDetectedTheme(foundDarkBg ? "dark" : "light");
+      }
+    };
+
+    checkTheme();
+    // Re-check on window resize or other changes
+    window.addEventListener("resize", checkTheme);
+    return () => window.removeEventListener("resize", checkTheme);
+  }, [variant]);
 
   const handleCopy = async () => {
     try {
@@ -64,8 +110,9 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
   // Always disable line numbers for now
   const shouldShowLineNumbers = false;
 
-  // Use light theme for light variant
-  const isLightTheme = variant === "light";
+  // Use light theme for light variant or detected light theme
+  const isLightTheme =
+    variant === "light" || (variant === "default" && detectedTheme === "light");
   const theme = isLightTheme ? vs : vscDarkPlus;
 
   return (

src/demo/version-info.json

@@ -1,12 +1,12 @@
 {
   "version": "0.1.0",
   "git": {
-    "commitHash": "58b8300b8c41fccee809f106e3849b026c6dffad",
-    "shortHash": "58b8300",
+    "commitHash": "bb2ab115052487299a10ab2826049fc73df5f2e0",
+    "shortHash": "bb2ab11",
     "branch": "release/v0.1.1-rc2",
-    "commitDate": "2025-07-07 22:30:18 -0500",
+    "commitDate": "2025-07-07 22:38:13 -0500",
     "latestTag": "v0.1.0",
-    "commitsSinceTag": 78,
+    "commitsSinceTag": 79,
     "isDirty": false
   },
   "deployment": {
@@ -15,7 +15,7 @@
     "isMainBranch": false,
     "deployPath": "ag-grid-react-components"
   },
-  "buildTime": "2025-07-08T03:31:04.557Z",
-  "displayVersion": "v0.1.0+78",
+  "buildTime": "2025-07-08T03:39:35.295Z",
+  "displayVersion": "v0.1.0+79",
   "displayLabel": "release/v0.1.1-rc2"
 }