Merge pull request #29 from MelanieH7/menunu

FIX: Updating 'menu' button colouring to follow the selected colour theme

Author: MinniMinMin

src/App.js

@@ -94,9 +94,11 @@ function App() {
   };
 
   useEffect(() => {
-    setTheme(getWithExpiry(SYSTEM_THEME_KEY));
+    const theme = getWithExpiry(SYSTEM_THEME_KEY);
+    setTheme(theme);
     setAlgoTheme(getWithExpiry(ALGO_THEME_KEY));
-  });
+    document.documentElement.setAttribute('data-theme', theme === 'dark' ? 'dark' : 'light');
+  }, []);
 
   return (
     <GlobalProvider>

src/styles/AlgorithmMenu.scss

@@ -4,8 +4,9 @@
 
     button {
         padding: 8px 12px;
-        background-color: #f0f0f0;
-        border: none;
+        background-color: var(--menu-background);
+        color: var(--menu-text);
+        border: 1px solid var(--menu-text);
         cursor: pointer;
         font-size: 0.9em;
     }
@@ -14,27 +15,28 @@
         position: absolute;
         top: 100%;
         left: 0;
-        background-color: white;
-        border: 1px solid #ccc;
+        background-color: var(--menu-background);
+        border: 1px solid var(--menu-text);
         box-shadow: 0 2px 5px rgba(0,0,0,0.1);
         z-index: 1000;
 
         .category {
             padding: 8px 12px;
             cursor: pointer;
             position: relative;
-            font-size: 0.9em; 
+            font-size: 0.9em;
+            color: var(--menu-text);
 
             &:hover {
-                background-color: #f0f0f0;
+                background-color: var(--menu-hover-background);
             }
 
             .subcategory {
                 position: absolute;
                 left: 100%;
                 top: 0;
-                background-color: white;
-                border: 1px solid #ccc;
+                background-color: var(--menu-background);
+                border: 1px solid var(--menu-text);
                 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
                 width: 250px;
                 display: flex;
@@ -43,14 +45,14 @@
                 a {
                     padding: 6px 10px;
                     text-decoration: none;
-                    color: black;
+                    color: var(--menu-text);
                     font-size: 0.85em;
 
                     &:hover {
-                        background-color: #f0f0f0;
+                        background-color: var(--menu-hover-background);
                     }
                 }
             }
         }
     }
-}
+}

src/styles/App.scss

@@ -5,6 +5,8 @@ body {
 	padding: 0;
 	font-family: Roboto, 'sans-serif';
 	-webkit-font-smoothing: subpixel-antialiased;
+	color: var(--text-color);
+	background-color: var(--background-color);
 }
 
 $handleLen: 40px;
@@ -167,7 +169,7 @@ $dragBarWidth: 10px;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	background-color: #f0f0f0;
+	background-color: #1B2A41;
 }
 
 .header-left {
@@ -178,4 +180,21 @@ $dragBarWidth: 10px;
 	flex: 18;
 	display: flex;
 	justify-content: flex-end;
-}
+}
+
+
+:root {
+    --text-color: #000;
+    --background-color: #fff;
+    --menu-background: #fff;
+    --menu-text: #000;
+    --menu-hover-background: #f0f0f0;
+}
+
+[data-theme="dark"] {
+    --text-color: #fff;
+    --background-color: #000;
+    --menu-background: #333;
+    --menu-text: #fff;
+    --menu-hover-background: #444;
+}

src/styles/Settings.scss

@@ -90,10 +90,6 @@ $headerHeight: 30px;
     }
   }
 
-  .label {
-
-  }
-
 }
 
 $btnSize: 48px;