Added dark and SFW modes.

assets/components/networks/networks.vue

@@ -102,18 +102,20 @@ export default {
 }
 
 .query {
+    color: var(--text);
+    background: var(--background);
     flex-grow: 1;
     box-sizing: border-box;
     padding: 1rem;
     border: none;
     box-sizing: border-box;
-    box-shadow: 0 0 3px $shadow-weak;
+    box-shadow: 0 0 3px var(--shadow-weak);
     margin: 1rem 0;
     font-size: 1rem;
     outline: none;
 
     &:focus {
-        box-shadow: 0 0 3px $primary;
+        box-shadow: 0 0 3px var(--primary);
     }
 }
 
@@ -123,14 +125,14 @@ export default {
     border: none;
 
     .icon {
-        fill: $shadow;
+        fill: var(--shadow);
     }
 
     &:hover {
         cursor: pointer;
 
         .icon {
-            fill: $primary;
+            fill: var(--primary);
         }
     }
 }