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;
+    }
+}
+

webapp/src/components/Header/index.jsx

@@ -13,7 +13,7 @@ export default function Header() {
       CordaCheckers<OfflineToggle />
     </h1>
     <nav>
-      <NavLink to="/leaderboard" className={data.leaderboardFetching && "woble"}  >
+      <NavLink to="/leaderboard" className={data.leaderboardFetching && "woble"}>
         <span>L</span>
         <span>e</span>
         <span>a</span>