Light mode

app/components/BlurredCode.tsx

@@ -2,8 +2,10 @@
 
 'use client';
 
+import { useState, useEffect } from 'react';
+import { useTheme } from 'next-themes';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 const pythonCode = `import quantum_entanglement
 import neural_net_vibes
@@ -44,16 +46,26 @@ if __name__ == "__main__":
     analyzer.check_is_sandwich(target="glizzy")`;
 
 export default function BlurredCode() {
+    const { resolvedTheme } = useTheme();
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        const timer = setTimeout(() => setMounted(true), 0);
+        return () => clearTimeout(timer);
+    }, []);
+
     return (
-        <div className="absolute inset-0 overflow-hidden bg-[#0d1117] z-0 pointer-events-none flex justify-center">
-            <div className="relative w-full h-full text-left p-8 opacity-40 blur-[2px] group-hover:blur-none group-hover:opacity-100 transition-all duration-700 animate-[scrollUp_40s_linear_infinite]">
-                <SyntaxHighlighter
-                    language="python"
-                    style={vscDarkPlus}
-                    customStyle={{ background: 'transparent', margin: 0, padding: 0, fontSize: '14px' }}
-                >
-                    {pythonCode + '\n\n\n' + pythonCode + '\n\n\n' + pythonCode}
-                </SyntaxHighlighter>
+        <div className="absolute inset-0 overflow-hidden bg-slate-50 dark:bg-[#0d1117] transition-colors duration-300 z-0 pointer-events-none flex justify-center">
+            <div className="relative w-full h-full text-left p-8 opacity-40 blur-[3px] group-hover:blur-[2px] group-hover:opacity-100 transition-all duration-700 animate-[scrollUp_40s_linear_infinite] [&_pre]:bg-transparent! [&_code]:bg-transparent!">
+                {mounted && (
+                    <SyntaxHighlighter
+                        language="python"
+                        style={resolvedTheme === 'light' ? oneLight : oneDark}
+                        customStyle={{ margin: 0, padding: 0, fontSize: '14px' }}
+                    >
+                        {pythonCode + '\n\n\n' + pythonCode + '\n\n\n' + pythonCode}
+                    </SyntaxHighlighter>
+                )}
             </div>
         </div>
     );