add theming via css custom properties

and a bonus dark color theme toggle

1 files changed, 3 insertions, 2 deletions

diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index 8251ec1b5..bd03c338a 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -8,7 +8,7 @@
   padding-right: 40px; // For the search icon
 
   &::placeholder {
-    color: #000;
+    color: var(--inputPlaceholderColor);
   }
 
   &:focus::placeholder {
@@ -28,7 +28,8 @@
   @include icon(25px);
   height: 21px;
 
-  background-image: url('../../assets/images/header/search.svg');
+  background-color: var(--mainForegroundColor);
+  mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%;
 
   // yolo
   position: absolute;