Came up with some crazy (retarded) solutions for dynamically styling the icons. Temporary, obviously

frontend/src/lib/components/header.svelte

@@ -52,7 +52,10 @@
         font-size: 28px;
         text-decoration: none; 
         color: var(--col_text_panel);
+    }
 
+    .header__link:hover {
+        color: var(--col_text_hint);
     }
 
 </style>

frontend/src/lib/components/icon.svelte

@@ -5,9 +5,11 @@
     export let onclick;
     export let color = "var(--col_text_panel)";
     export let size = "25px";
+
 </script>
 
-<input class="icon" type="button" value="" 
+<!-- FIXME: You horrible son of a goose-->
+<input class={"icon " + (onclick ? "clickable" : "")} type="button" value="" 
 style="--image: url({image}); --color: {color}; background-color: {color}; --size: {size};" 
 on:click={onclick ? onclick : null}>
 
@@ -27,6 +29,6 @@ on:click={onclick ? onclick : null}>
         cursor: pointer;
     }
     .clickable:hover {
-        background-color: var(--col_text_hint);
+        background-color: var(--col_text_hint) !important;
     }
 </style>

frontend/src/lib/components/searchbar.svelte

@@ -24,9 +24,6 @@
         margin-inline: auto auto;
     }
 
-    .searchbar__icon {
-        margin: 9px;
-    }
     .searchbar__input {
         border: none;
         background-color: transparent;

frontend/src/lib/css/colors.css

@@ -11,7 +11,7 @@
     --col_text: #000000;
     --col_text_query: #ffffff;
     --col_text_invalid: #cc0000;
-    --col_text_hint: #aaaaaa; 
+    --col_text_hint: #dedede; 
     --col_text_panel: #ffffff;
     --col_text_footer: #ffffff;
     --col_text_copyright: #ffffff;