fix(dark-mode): persist theme and read prefers-color-scheme on load

Author: avinxshKD

src/App.jsx

@@ -32,13 +32,13 @@ const app = () => {
         };
     }, []);
 
-    // Update document theme attribute when darkMode changes
     useEffect(() => {
         if (superState.darkMode) {
             document.documentElement.setAttribute('data-theme', 'dark');
         } else {
             document.documentElement.removeAttribute('data-theme');
         }
+        localStorage.setItem('darkMode', superState.darkMode);
     }, [superState.darkMode]);
 
     return (

src/component/Header.jsx

@@ -52,18 +52,7 @@ const Header = ({ superState, dispatcher }) => {
                 </section>
                 <div
                     onClick={() => dispatcher({ type: T.TOGGLE_DARK_MODE })}
-                    style={{
-                        cursor: 'pointer',
-                        border: '1px solid #ccc',
-                        padding: '0 8px',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        transition: 'opacity 0.2s',
-                        backgroundColor: '#eee',
-                    }}
-                    onMouseEnter={(e) => { e.currentTarget.style.opacity = '0.7'; }}
-                    onMouseLeave={(e) => { e.currentTarget.style.opacity = '1'; }}
+                    className="theme-toggle"
                     role="button"
                     tabIndex={0}
                     onKeyDown={(e) => e.key === 'Enter' && dispatcher({ type: T.TOGGLE_DARK_MODE })}

src/component/codeEdit.css

@@ -35,4 +35,9 @@
     font-family: monospace;
     width: 100%;
     white-space: break-spaces;
-}
+}
+
+[data-theme='dark'] .textField {
+    background-color: #2D2D2D;
+    color: #E4E4E4;
+}

src/component/header.css

@@ -146,7 +146,31 @@
     background-color: #2B8CF7;
 }
 
+[data-theme='dark'] .theme-toggle {
+    background-color: #2D2D2D;
+    border: 1px solid #3E3E3E;
+}
+
+[data-theme='dark'] .theme-icon {
+    color: #E4E4E4;
+}
+
 /* Theme Icon Color */
 .theme-icon {
     color: black;
-}
+}
+
+.theme-toggle {
+    cursor: pointer;
+    border: 1px solid #ccc;
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #eee;
+    transition: opacity 0.2s;
+}
+
+.theme-toggle:hover {
+    opacity: 0.7;
+}

src/reducer/initialState.js

@@ -38,7 +38,9 @@ const initialState = {
     octave: false,
     logs: false,
     logsmessage: '',
-    darkMode: false,
+    darkMode: localStorage.getItem('darkMode') !== null
+        ? localStorage.getItem('darkMode') === 'true'
+        : window.matchMedia('(prefers-color-scheme: dark)').matches,
     clipboard: [],
     confirmModal: { open: false, message: '', onConfirm: null },
     searchPanel: false,