Added dark and SFW modes.

assets/components/header/search.vue

@@ -66,14 +66,14 @@ export default {
     align-items: center;
     justify-content: flex-end;
     padding: 0 1rem 0 0;
-    border-left: solid 1px $shadow-hint;
+    border-left: solid 1px var(--shadow-hint);
 
     &.compact {
         padding: 0;
         border: none;
 
         .search-input {
-            border: solid 1px $shadow-hint;
+            border: solid 1px var(--shadow-hint);
         }
 
         .search-button {
@@ -88,12 +88,14 @@ export default {
     width: 100%;
     padding: .5rem;
     border: none;
+    color: var(--text);
+    background: var(--background);
     outline: none;
     font-size: 1rem;
     outline: none;
 
     &::placeholder {
-        color: $shadow;
+        color: var(--shadow);
     }
 
     &::-webkit-search-cancel-button {
@@ -101,7 +103,7 @@ export default {
         padding: .5rem;
         position: relative;
         right: 0;
-        color: $text;
+        color: var(--text);
         background: url('/img/cancel-circle2.svg');
         opacity: .25;
 
@@ -112,7 +114,7 @@ export default {
     }
 
     &:focus::placeholder {
-        color: $shadow-weak;
+        color: var(--shadow-weak);
     }
 }
 
@@ -125,14 +127,14 @@ export default {
     outline: none;
 
     .icon {
-        fill: $shadow-weak;
+        fill: var(--shadow-weak);
     }
 
     &:hover {
         cursor: pointer;
 
         .icon {
-            fill: $shadow;
+            fill: var(--shadow);
         }
     }
 }