Expand custom css theming support

Also adds new default dark theme designed by @gripped.

app/filter.py

@@ -153,7 +153,9 @@ class Filter:
 
         if src.startswith(LOGO_URL):
             # Re-brand with Whoogle logo
-            element.replace_with(BeautifulSoup(render_template('logo.html')))
+            element.replace_with(BeautifulSoup(
+                render_template('logo.html', dark=self.dark),
+                features='html.parser'))
             return
         elif src.startswith(GOOG_IMG) or GOOG_STATIC in src:
             element['src'] = BLANK_B64
@@ -164,7 +166,6 @@ class Filter:
             is_element=True) + '&type=' + urlparse.quote(mime)
 
     def update_styling(self, soup) -> None:
-        """"""
         # Remove unnecessary button(s)
         for button in soup.find_all('button'):
             button.decompose()

app/routes.py

@@ -128,7 +128,7 @@ def index():
                            countries=app.config['COUNTRIES'],
                            logo=render_template(
                                'logo.html',
-                               config=g.user_config),
+                               dark=g.user_config.dark),
                            config=g.user_config,
                            tor_available=int(os.environ.get('TOR_AVAILABLE')),
                            version_number=app.config['VERSION_NUMBER'])
@@ -227,7 +227,7 @@ def search():
         search_header=(render_template(
             'header.html',
             config=g.user_config,
-            logo=render_template('logo.html'),
+            logo=render_template('logo.html', dark=g.user_config.dark),
             query=urlparse.unquote(query),
             search_type=search_util.search_type,
             mobile=g.user_request.mobile)

app/static/css/dark-theme.css

@@ -90,11 +90,11 @@ select {
 }
 
 .collapsible {
-    color: var(--whoogle-dark-element-bg) !important;
+    color: var(--whoogle-dark-text);
 }
 
 .collapsible:after {
-    color: var(--whoogle-dark-element-bg) !important;
+    color: var(--whoogle-dark-text);
 }
 
 .active {
@@ -108,11 +108,11 @@ select {
 }
 
 .active:after {
-    color: var(--whoogle-dark-contrast-text);
+    color: var(--whoogle-dark-contrast-text) !important;
 }
 
 #gh-link {
-    color: var(--whoogle-dark-element-bg);
+    color: var(--whoogle-dark-contrast-text);
 }
 
 .autocomplete-items {

app/static/css/light-theme.css

@@ -86,11 +86,11 @@ input {
 }
 
 .collapsible {
-    color: var(--whoogle-element-bg) !important;
+    color: var(--whoogle-text) !important;
 }
 
 .collapsible:after {
-    color: var(--whoogle-element-bg) !important;
+    color: var(--whoogle-text);
 }
 
 .active {

app/static/css/variables.css

@@ -13,14 +13,14 @@
     --whoogle-result-visited: #4b11a8;
 
     /* DARK THEME COLORS */
-    --whoogle-dark-logo: #685e79;
+    --whoogle-dark-logo: #888888;
-    --whoogle-dark-page-bg: #222222;
+    --whoogle-dark-page-bg: #080808;
-    --whoogle-dark-element-bg: #685e79;
+    --whoogle-dark-element-bg: #111111;
-    --whoogle-dark-text: #ffffff;
+    --whoogle-dark-text: #dddddd;
-    --whoogle-dark-contrast-text: #000000;
+    --whoogle-dark-contrast-text: #aaaaaa;
-    --whoogle-dark-secondary-text: #bbbbbb;
+    --whoogle-dark-secondary-text: #8a8b8c;
-    --whoogle-dark-result-bg: #000000;
+    --whoogle-dark-result-bg: #111111;
-    --whoogle-dark-result-title: #1967d2;
+    --whoogle-dark-result-title: #dddddd;
-    --whoogle-dark-result-url: #4b11a8;
+    --whoogle-dark-result-url: #eceff4;
-    --whoogle-dark-result-visited: #bbbbff;
+    --whoogle-dark-result-visited: #959595;
 }

app/templates/display.html

@@ -17,9 +17,9 @@
     {{ response|safe }}
     </body>
     <footer>
-        <p style="color: {{ '#fff' if config.dark else '#000' }};">
+        <p style="color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};">
             Whoogle Search v{{ version_number }} ||
-            <a style="color: #685e79" href="https://github.com/benbusby/whoogle-search">View on GitHub</a>
+            <a id="gh-link" href="https://github.com/benbusby/whoogle-search">View on GitHub</a>
         </p>
     </footer>
 	<script src="static/js/autocomplete.js"></script>

app/templates/index.html

@@ -144,10 +144,10 @@
             </div>
         </div>
         <footer>
-            <p style="color: {{ '#fff' if config.dark else '#000' }};">
+			<p style="color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};">
-                Whoogle Search v{{ version_number }} ||
+				Whoogle Search v{{ version_number }} ||
-                <a id="gh-link" href="https://github.com/benbusby/whoogle-search">View on GitHub</a>
+				<a id="gh-link" href="https://github.com/benbusby/whoogle-search">View on GitHub</a>
-            </p>
+			</p>
         </footer>
     </body>
 </html>

app/templates/logo.html

@@ -2,7 +2,7 @@
     <svg id="Layer_1" class="whoogle-svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1028 254">
         <style>
             path {
-                fill: {{ 'var(--whoogle-dark-logo)' if config.dark else 'var(--whoogle-logo)' }};
+                fill: {{ 'var(--whoogle-dark-logo)' if dark else 'var(--whoogle-logo)' }};
             }
         </style>
         <defs>