front: DarkReader friendly CSS

webapp/src/components/Header/index.css

@@ -16,22 +16,38 @@ nav {
     flex-wrap: wrap;
 
     a {
-        /* color: #CCC; */
-        opacity: .3;
+        color: lightgray;
         text-decoration: none;
         transition: .25s ease;
 
         margin-left: 30px;
         margin-right: 30px;
+        padding: 0.25rem 1rem;
     }
 
     .active {
-        opacity: 1;
-        box-shadow: 0 2px 0 0 currentcolor;
+        color: white;
+        border-radius: 2px; 
+        background-color: cadetblue;
+        opacity: 80%;
+        padding: 0.25rem 1rem;
     }
 
     a:hover:not(.active) {
-        /* color: #000; */
-        opacity: .5;
+        color:cadetblue;
+
+        box-shadow: 0 1.5px 0 0 currentcolor;
     }
 }
+
+[data-darkreader-scheme="dark"] nav {
+    a {
+        color: darkslategrey;
+    }
+
+    .active {
+        color: white; 
+        box-shadow: 0 1.5px 0 0 currentcolor;
+    }
+}
+