More tweaks to css..

delegating search-bar style to .css

app/static/css/themes/nord-search.css

@@ -25,6 +25,21 @@
     border-bottom: 1px solid #242424;
 }
 
+body.dark * div#search-bar-autocomplete-list div{
+    padding: 10px;
+    cursor: pointer;
+    color: #ECEFF4 !important;
+    background-color: #3B4252 !important;
+    border-bottom: 1px solid #fff;
+}
+
+body.dark * div#search-bar-autocomplete-list div:hover {
+    background-color: #4C566A !important;
+    color: #ECEFF4 !important;
+}
+
+
+
 .autocomplete-items div:hover {
     background-color: #4C566A !important;
     color: #ECEFF4 !important;

app/static/css/themes/nord.css

@@ -25,6 +25,10 @@ a:visited h3 div {
     color: #A3BE8C !important;
 }
 
+body.dark * a:visited h3 div{
+    color: #A3BE8C !important;
+}
+
 a:link h3 div {
     color: #4C566A 
 }
@@ -33,12 +37,12 @@ a:link div {
     color: #81a1c1 !important;
 }
 
-div span {
+div span.dark {
-    color: #3B4252;
+    color: #f9fafb !important;
 }
 
-div span.dark {
+div span {
-    color: #f9fafb;
+    color: #3B4252;
 }
 
 input {
@@ -46,8 +50,22 @@ input {
     color: #3B4252 !important;
 }
 
+body.dark * input {
+    background-color: #4C566A !important;
+    color: #f9fafb !important;
+}
+
+body.dark * #search-bar {
+    width: 100%;
+    border: 1px solid #e9e9e9;
+    color: #f9fafb;
+    background-color: #4C566A;
+
+}
+
+
 #search-bar {
-    color: #4C566A !important;
+    color: #4C566A;
     background-color: #ffffff ;
 }
 

app/static/css/themes/whoogle-search.css

@@ -24,6 +24,24 @@
     border-bottom: 1px solid #d4d4d4;
 }
 
+body.dark * div#search-bar-autocomplete-list  div{
+    padding: 10px;
+    cursor: pointer;
+    color: #ddd;
+    background-color: #000;
+    border-bottom: 1px solid #fff;
+}
+
+body.dark * div#search-bar-autocomplete-list div:hover {
+    background-color: #222;
+}
+
+body.dark * #search-bar {
+    width: 100%;
+    border: 3px solid #e9e9e9;
+    color: #fff;
+
+}
 .autocomplete-items div:hover {
     background-color: #e9e9e9;
 }

app/static/css/themes/whoogle.css

@@ -1,4 +1,26 @@
+html.dark {
+    background-color: #222 !important;
+}
+
+body.dark {
+    background-color: #222 !important;
+}
+
+body.dark>#search-bar-autocomplete-list  div{
+    padding: 10px;
+    cursor: pointer;
+    color: #ddd;
+    background-color: #000;
+    border-bottom: 1px solid #fff;
+}
+
+
 .reskin {
     background-color: #fff;
     color: #333;
+}
+
+.reskin-dark {
+    background-color: #000;
+    color: #fff;
 }

app/templates/header.html

@@ -12,9 +12,7 @@
                 <div class="H0PQec" style="width: 100%;">
                     <div class="sbc esbc autocomplete">
                         <input id="search-bar" autocapitalize="none" autocomplete="off" class="noHIxc" name="q"
-                               style="background-color: {{ '#000' if dark_mode else '#fff' }};
+                               style=border: {{ '1px solid #685e79' if dark_mode else '' }}"
-                                       color: {{ '#292E39' if dark_mode else '#000' }};
-                                       border: {{ '1px solid #685e79' if dark_mode else '' }}"
                                spellcheck="false" type="text" value="{{ query }}">
                         <input name="tbm" value="{{ search_type }}" style="display: none">
                         <div class="sc"></div>
@@ -38,9 +36,7 @@
                     <div style="width: 100%; display: flex">
                         <input id="search-bar" autocapitalize="none" autocomplete="off" class="noHIxc" name="q"
                                spellcheck="false" type="text" value="{{ query }}"
-                               style="background-color: {{ '#000' if dark_mode else '#fff' }};
+                               style="border: {{ '1px solid #685e79' if dark_mode else '' }}">
-                                       color: {{ '#685e79' if dark_mode else '#000' }};
-                                       border: {{ '1px solid #685e79' if dark_mode else '' }}">
                         <input name="tbm" value="{{ search_type }}" style="display: none">
                         <div class="sc"></div>
                     </div>