processing · Mohit-kumar-007 · Feb 2, 2025
diff --git a/public/index.html b/public/index.html
@@ -31,6 +31,13 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>p5.js Showcase</title>
+    <script>
+      (function() {
+        const savedTheme = localStorage.getItem('theme') || 
+          (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+        document.documentElement.setAttribute('data-theme', savedTheme);
+      })();
+    </script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -7,6 +7,7 @@ import { Switch, Route, Link, HashRouter } from "react-router-dom";
 import Gallery from "./global_components/Gallery.js";
 import About from "./global_components/About.js";
 import FilterButton from "./global_components/FilterButton";
+import DarkModeToggle from './global_components/DarkModeToggle';
 
 import Showcase2020 from "./showcase_2020/Showcase2020";
 import GalleryNineteen from "./showcase_2020/GalleryNineteen.js";
@@ -70,6 +71,7 @@ export default function App() {
             <button onClick={() => changeLanguage("ko_showcase_2020")}>
               한국어
             </button>
+            <DarkModeToggle />
           </div>
         </div>
         <div className="nav-text">
@@ -116,6 +118,7 @@ export default function App() {
             <button onClick={() => changeLanguage("ko_showcase_2021")}>
               한국어
             </button>
+            <DarkModeToggle />
           </div>
         </div>
         <div className="nav-text">
@@ -151,6 +154,7 @@ export default function App() {
             <button onClick={() => changeLanguage("es")}>Español</button>
             <button onClick={() => changeLanguage("zh_Hans")}>简体中文</button>
             <button onClick={() => changeLanguage("ko")}>한국어</button>
+            <DarkModeToggle />
           </div>
         </div>
       </div>

diff --git a/src/global_components/DarkModeToggle.js b/src/global_components/DarkModeToggle.js
@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+import '../styles/darkMode.css';
+
+const DarkModeToggle = () => {
+  const [darkMode, setDarkMode] = useState(() => {
+    // Get initial state from localStorage or system preference
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+      return savedTheme === 'dark';
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  });
+
+  useEffect(() => {
+    // Update data-theme attribute and localStorage when darkMode changes
+    document.documentElement.setAttribute('data-theme', darkMode ? 'dark' : 'light');
+    localStorage.setItem('theme', darkMode ? 'dark' : 'light');
+  }, [darkMode]);
+
+  return (
+    <button
+      onClick={() => setDarkMode(!darkMode)}
+      style={{
+        background: 'none',
+        border: '1px solid var(--text-color)',
+        borderRadius: '20px',
+        padding: '5px 10px',
+        cursor: 'pointer',
+        color: 'var(--text-color)',
+        marginLeft: '10px'
+      }}
+    >
+      {darkMode ? '☀️ Light' : '🌙 Dark'}
+    </button>
+  );
+};
+
+export default DarkModeToggle; 
diff --git a/src/styles/darkMode.css b/src/styles/darkMode.css
@@ -0,0 +1,55 @@
+/* Dark mode styles */
+:root[data-theme="dark"] {
+  --background-color: #121212;
+  --text-color: #ffffff;
+  --card-background: #1e1e1e;
+  --nav-background: #1a1a1a;
+  --link-color: #bb86fc;
+  --border-color: #333333;
+  --button-background: #333333;
+  --button-color: #ffffff;
+  --hover-color: #bb86fc;
+}
+
+/* Light mode styles */
+:root[data-theme="light"] {
+  --background-color: #ffffff;
+  --text-color: #000000;
+  --card-background: #ffffff;
+  --nav-background: #f8f9fa;
+  --link-color: #0056b3;
+  --border-color: #dee2e6;
+  --button-background: #f8f9fa;
+  --button-color: #000000;
+  --hover-color: #0056b3;
+}
+
+/* Apply variables */
+body {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  transition: all 0.3s ease;
+}
+
+.navigation, .navigation2022 {
+  background-color: var(--nav-background);
+}
+
+.card {
+  background-color: var(--card-background);
+  border-color: var(--border-color);
+}
+
+a {
+  color: var(--link-color);
+}
+
+/* Apply to specific elements */
+button {
+  background-color: var(--button-background);
+  color: var(--button-color);
+}
+
+button:hover {
+  color: var(--hover-color);
+}