Allow theme to mirror user system settings

Introduces a new config element and environment variable
(WHOOGLE_CONFIG_THEME) for setting the theme of the app. Rather than
just having either light or dark, this allows a user to have their
instance use their current system light/dark preference to determine the
theme to use.

As a result, the dark mode setting (and WHOOGLE_CONFIG_DARK) have been
deprecated, but will still work as expected until a system theme has
been chosen.

README.md

@@ -324,7 +324,7 @@ These environment variables allow setting default config values, but can be over
 | WHOOGLE_CONFIG_LANGUAGE        | Set interface language                                          |
 | WHOOGLE_CONFIG_SEARCH_LANGUAGE | Set search result language                                      |
 | WHOOGLE_CONFIG_BLOCK           | Block websites from search results (use comma-separated list)   |
-| WHOOGLE_CONFIG_DARK            | Enable dark theme                                               |
+| WHOOGLE_CONFIG_THEME           | Set theme mode (light, dark, or system)                         |
 | WHOOGLE_CONFIG_SAFE            | Enable safe searches                                            |
 | WHOOGLE_CONFIG_ALTS            | Use social media site alternatives (nitter, invidious, etc)     |
 | WHOOGLE_CONFIG_TOR             | Use Tor routing (if available)                                  |

app.json

@@ -95,9 +95,9 @@
         "value": "",
         "required": false
     },
-    "WHOOGLE_CONFIG_DARK": {
-        "description": "[CONFIG] Enable dark mode (set to 1 or leave blank)",
-        "value": "",
+    "WHOOGLE_CONFIG_THEME": {
+        "description": "[CONFIG] Set theme to 'dark', 'light', or 'system'",
+        "value": "system",
         "required": false
     },
     "WHOOGLE_CONFIG_SAFE": {

app/__init__.py

@@ -36,6 +36,8 @@ app.config['COUNTRIES'] = json.load(open(
     os.path.join(app.config['STATIC_FOLDER'], 'settings/countries.json')))
 app.config['TRANSLATIONS'] = json.load(open(
     os.path.join(app.config['STATIC_FOLDER'], 'settings/translations.json')))
+app.config['THEMES'] = json.load(open(
+    os.path.join(app.config['STATIC_FOLDER'], 'settings/themes.json')))
 app.config['CONFIG_PATH'] = os.getenv(
     'CONFIG_VOLUME',
     os.path.join(app.config['STATIC_FOLDER'], 'config'))

app/models/config.py

@@ -20,8 +20,9 @@ class Config:
                               'css/variables.css')).read())
         self.block = os.getenv('WHOOGLE_CONFIG_BLOCK', '')
         self.ctry = os.getenv('WHOOGLE_CONFIG_COUNTRY', '')
+        self.theme = os.getenv('WHOOGLE_CONFIG_THEME', '')
         self.safe = read_config_bool('WHOOGLE_CONFIG_SAFE')
-        self.dark = read_config_bool('WHOOGLE_CONFIG_DARK')
+        self.dark = read_config_bool('WHOOGLE_CONFIG_DARK')  # deprecated
         self.alts = read_config_bool('WHOOGLE_CONFIG_ALTS')
         self.nojs = read_config_bool('WHOOGLE_CONFIG_NOJS')
         self.tor = read_config_bool('WHOOGLE_CONFIG_TOR')
@@ -34,7 +35,8 @@ class Config:
             'lang_search',
             'lang_interface',
             'ctry',
-            'dark'
+            'dark',
+            'theme'
         ]
 
         # Skip setting custom config if there isn't one

app/routes.py

@@ -130,6 +130,7 @@ def index():
     return render_template('index.html',
                            languages=app.config['LANGUAGES'],
                            countries=app.config['COUNTRIES'],
+                           themes=app.config['THEMES'],
                            translation=app.config['TRANSLATIONS'][
                                g.user_config.get_localization_lang()
                            ],

app/static/css/dark-theme.css

@@ -81,9 +81,15 @@ select {
     background-color: var(--whoogle-dark-divider) !important;
 }
 
+.home-search {
+    border-color: var(--whoogle-dark-element-bg) !important;
+}
+
 #search-bar {
     border-color: var(--whoogle-dark-element-bg) !important;
     color: var(--whoogle-dark-text) !important;
+    background-color: var(--whoogle-dark-result-bg) !important;
+    border-bottom: 2px solid var(--whoogle-dark-element-bg);
 }
 
 #search-bar:focus {
@@ -102,11 +108,11 @@ select {
 }
 
 .collapsible {
-    color: var(--whoogle-dark-text);
+    color: var(--whoogle-dark-text) !important;
 }
 
 .collapsible:after {
-    color: var(--whoogle-dark-text);
+    color: var(--whoogle-dark-text) !important;
 }
 
 .active {
@@ -146,3 +152,28 @@ select {
     background-color: var(--whoogle-dark-element-bg) !important;
     color: var(--whoogle-dark-contrast-text) !important;
 }
+
+.footer {
+    color: var(--whoogle-dark-text);
+}
+
+path {
+    fill: var(--whoogle-dark-logo);
+}
+
+.header-div {
+    background-color: var(--whoogle-dark-result-bg) !important;
+}
+
+#search-reset {
+    color: var(--whoogle-dark-text) !important;
+}
+
+.mobile-search-bar {
+    background-color: var(--whoogle-dark-result-bg) !important;
+    color: var(--whoogle-dark-text) !important;
+}
+
+.search-bar-desktop {
+    color: var(--whoogle-dark-text) !important;
+}

app/static/css/header.css

@@ -16,6 +16,9 @@ header {
 .mobile-logo {
     font: 22px/36px Futura, Arial, sans-serif;
     padding-left: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .logo-div {
@@ -71,3 +74,35 @@ header {
     border-radius: 8px;
     box-shadow: 0 0 6px 1px #2375e8;
 }
+
+#mobile-header-logo {
+    height: 1.75em;
+}
+
+.mobile-input-div {
+    width: 100%;
+}
+
+.mobile-search-bar {
+    display: block;
+    font-size: 16px;
+    padding: 0 0 0 8px;
+    padding-right: 0px;
+    -webkit-box-flex: 1;
+    height: 35px;
+    outline: none;
+    border: none;
+    width: 100%;
+    -webkit-tap-highlight-color: rgba(0,0,0,.00);
+    overflow: hidden;
+    border: 0px !important;
+}
+
+.desktop-header-logo {
+    height: 1.65em;
+}
+
+.header-autocomplete {
+    width: 100%;
+    flex: 1
+}

app/static/css/light-theme.css

@@ -80,7 +80,7 @@ input {
 }
 
 .home-search {
-    border: 3px solid var(--whoogle-element-bg) !important;
+    border-color: var(--whoogle-element-bg) !important;
 }
 
 .search-container {
@@ -142,3 +142,30 @@ input {
     background-color: var(--whoogle-element-bg) !important;
     color: var(--whoogle-contrast-text) !important;
 }
+
+.footer {
+    color: var(--whoogle-text);
+}
+
+path {
+    fill: var(--whoogle-logo);
+}
+
+.header-div {
+    background-color: var(--whoogle-result-bg) !important;
+}
+
+#search-reset {
+    color: var(--whoogle-text) !important;
+}
+
+.mobile-search-bar {
+    background-color: var(--whoogle-result-bg) !important;
+    color: var(--whoogle-text) !important;
+}
+
+.search-bar-desktop {
+    background-color: var(--whoogle-result-bg) !important;
+    color: var(--whoogle-text);
+    border-bottom: 0px;
+}

app/static/css/main.css

@@ -13,6 +13,11 @@ body {
     max-height: 500px;
 }
 
+.home-search {
+    background: transparent !important;
+    border: 3px solid;
+}
+
 .search-container {
     background: transparent !important;
     width: 80%;

app/static/css/system-theme.css

@@ -0,0 +1,2 @@
+@import "/static/css/light-theme.css" screen;
+@import "/static/css/dark-theme.css" screen and (prefers-color-scheme: dark);

app/static/settings/themes.json

@@ -0,0 +1,5 @@
+[
+    "light",
+    "dark",
+    "system"
+]

app/static/settings/translations.json

@@ -10,6 +10,7 @@
         "config-near-help": "City Name",
         "config-block": "Block",
         "config-block-help": "Comma-separated site list",
+        "config-theme": "Theme",
         "config-nojs": "Show NoJS Links",
         "config-dark": "Dark Mode",
         "config-safe": "Safe Search",
@@ -26,7 +27,10 @@
         "apply": "Apply",
         "save-as": "Save As...",
         "github-link": "View on GitHub",
-        "translate": "translate"
+        "translate": "translate",
+        "light": "light",
+        "dark": "dark",
+        "system": "system"
     },
     "lang_nl": {
         "search": "Zoeken",
@@ -39,6 +43,7 @@
         "config-near-help": "Stad",
         "config-block": "Blok",
         "config-block-help": "Lijst met sites met kommas onderscheiden",
+        "config-theme": "Thema",
         "config-nojs": "Laat NoJS links zien",
         "config-dark": "Donkere Modus",
         "config-safe": "Veilig zoeken",
@@ -55,7 +60,10 @@
         "apply": "Opslaan",
         "save-as": "Opslaan Als...",
         "github-link": "Bekijk op GitHub",
-        "translate": "vertalen"
+        "translate": "vertalen",
+        "light": "helder",
+        "dark": "donker",
+        "system": "systeeminstellingen"
     },
     "lang_de": {
         "search": "Suchen",
@@ -68,6 +76,7 @@
         "config-near-help": "Stadt-Name",
         "config-block": "Block",
         "config-block-help": "Komma-getrennte Liste von Seiten",
+        "config-theme": "Thema",
         "config-nojs": "NoJS-Links anzeigen",
         "config-dark": "Dark Mode",
         "config-safe": "Sicheres Suchen",
@@ -84,7 +93,10 @@
         "apply": "Übernehmen",
         "save-as": "Speichern unter...",
         "github-link": "Auf GitHub öffnen",
-        "translate": "Übersetzen"
+        "translate": "Übersetzen",
+        "light": "hell",
+        "dark": "dunkel",
+        "system": "Systemeinstellung"
     },
     "lang_es": {
         "search": "Buscar",
@@ -97,6 +109,7 @@
         "config-near-help": "Nombre de la Ciudad",
         "config-block": "Bloquear",
         "config-block-help": "Lista de sitios separados por comas",
+        "config-theme": "Tema",
         "config-nojs": "Mostrar Enlaces NoJS",
         "config-dark": "Modo Oscuro",
         "config-safe": "Búsqueda Segura",
@@ -113,7 +126,10 @@
         "apply": "Aplicar",
         "save-as": "Guardar como...",
         "github-link": "Ver en GitHub",
-        "translate": "traducir"
+        "translate": "traducir",
+        "light": "brillante",
+        "dark": "oscuro",
+        "system": "configuración del sistema"
     },
     "lang_it": {
         "search": "Cerca",
@@ -126,6 +142,7 @@
         "config-near-help": "Nome della città",
         "config-block": "Blocca",
         "config-block-help": "Lista di siti separati da virgole",
+        "config-theme": "Tema",
         "config-nojs": "Mostra link NoJS",
         "config-dark": "Modalità Notte",
         "config-safe": "Ricerca Sicura",
@@ -142,7 +159,10 @@
         "apply": "Applica",
         "save-as": "Salva Come...",
         "github-link": "Guarda su GitHub",
-        "translate": "tradurre"
+        "translate": "tradurre",
+        "light": "luminoso",
+        "dark": "notte",
+        "system": "impostazioni di sistema"
     },
     "lang_pt": {
         "search": "Buscar",
@@ -155,6 +175,7 @@
         "config-near-help": "Nome da Cidade",
         "config-block": "Bloquear",
         "config-block-help": "Lista de sites separados por vírgulas",
+        "config-theme": "Tema",
         "config-nojs": "Mostrar Links NoJS",
         "config-dark": "Modo Escuro",
         "config-safe": "Busca Segura",
@@ -171,7 +192,10 @@
         "apply": "Aplicar",
         "save-as": "Salvar Como...",
         "github-link": "Ver no GitHub",
-        "translate": "traduzir"
+        "translate": "traduzir",
+        "light": "brilhante",
+        "dark": "escuro",
+        "system": "configuração de sistema"
     },
     "lang_zh-CN": {
         "search": "搜索",
@@ -184,6 +208,7 @@
         "config-near-help": "城市名",
         "config-block": "屏蔽",
         "config-block-help": "逗号分隔的网站列表",
+        "config-theme": "主题",
         "config-nojs": "显示 NoJS 链接",
         "config-dark": "深色模式",
         "config-safe": "安全搜索",
@@ -200,7 +225,10 @@
         "apply": "应用",
         "save-as": "另存为...",
         "github-link": "在 GitHub 上查看",
-        "translate": "翻译"
+        "translate": "翻译",
+        "light": "明亮的",
+        "dark": "黑暗的",
+        "system": "系统设置"
     },
     "lang_si": {
         "search": "සොයන්න",
@@ -213,6 +241,7 @@
         "config-near-help": "නගරයේ නම",
         "config-block": "අවහිර",
         "config-block-help": "අල්ප විරාම වලින් වෙන් වූ අඩවි ලැයිස්තුව",
+        "config-theme": "තේමාව",
         "config-nojs": "නෝජේඑස් සබැඳි පෙන්වන්න",
         "config-dark": "අඳුරු ආකාරය",
         "config-safe": "ආරක්ෂිත සෙවීම",
@@ -229,6 +258,9 @@
         "apply": "යොදන්න",
         "save-as": "...ලෙස සුරකින්න",
         "github-link": "ගිට්හබ් හි බලන්න",
-        "translate": "පරිවර්තනය කරන්න"
+        "translate": "පරිවර්තනය කරන්න",
+        "light": "දීප්තිමත්",
+        "dark": "අඳුරු",
+        "system": "පද්ධති සැකසුම"
     }
 }

app/templates/display.html

@@ -9,7 +9,11 @@
         <link rel="stylesheet" href="static/css/search.css">
         <link rel="stylesheet" href="static/css/variables.css">
         <link rel="stylesheet" href="static/css/header.css">
+        {% if config.theme %}
+        <link rel="stylesheet" href="static/css/{{ config.theme }}-theme.css"/>
+        {% else %}
         <link rel="stylesheet" href="static/css/{{ 'dark' if config.dark else 'light' }}-theme.css"/>
+        {% endif %}
         <style>{{ config.style }}</style>
         <title>{{ clean_query(query) }} - Whoogle Search</title>
     </head>
@@ -24,7 +28,7 @@
     {{ response|safe }}
     </body>
     <footer>
-        <p style="color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};">
+        <p class="footer">
             Whoogle Search v{{ version_number }} ||
             <a id="gh-link" href="https://github.com/benbusby/whoogle-search">{{ translation['github-link'] }}</a>
         </p>

app/templates/header.html

@@ -1,29 +1,26 @@
 {% if mobile %}
     <header>
-        <div style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important;" class="bz1lBb">
+        <div class="bz1lBb header-div">
             <form class="search-form Pg70bf" id="search-form" method="POST">
-                <a class="logo-link mobile-logo"
-                   href="/"
-                   style="display:flex; justify-content:center; align-items:center;">
-                    <div style="height: 1.75em;">
+                <a class="logo-link mobile-logo" href="/">
+                    <div id="mobile-header-logo">
                         {{ logo|safe }}
                     </div>
                 </a>
-                <div class="H0PQec" style="width: 100%;">
+                <div class="H0PQec mobile-input-div">
                     <div class="sbc esbc autocomplete">
                         <input 
                             id="search-bar" 
+                            class="mobile-search-bar"
                             autocapitalize="none" 
                             autocomplete="off" 
                             autocorrect="off"
                             spellcheck="false" 
                             class="noHIxc" 
                             name="q"
-                            style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important;
-                                   color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};"
                             type="text" 
                             value="{{ clean_query(query) }}">
-                        <input style="color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }}" id="search-reset" type="reset" value="x">
+                        <input id="search-reset" type="reset" value="x">
                         <input name="tbm" value="{{ search_type }}" style="display: none">
                         <input type="submit" style="display: none;">
                         <div class="sc"></div>
@@ -36,14 +33,14 @@
     <header>
         <div class="logo-div">
             <a class="logo-link" href="/">
-                <div style="height: 1.65em;">
+                <div class="desktop-header-logo">
                     {{ logo|safe }}
                 </div>
             </a>
         </div>
         <div class="search-div">
             <form id="search-form" class="search-form" id="sf" method="POST">
-                <div class="autocomplete" style="width: 100%; flex: 1">
+                <div class="autocomplete header-autocomplete">
                     <div style="width: 100%; display: flex">
                         <input 
                             id="search-bar" 
@@ -54,10 +51,7 @@
                             name="q"
                             spellcheck="false"
                             type="text"
-                            value="{{ clean_query(query) }}"
-                            style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important;
-                                   color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};
-                                   border-bottom: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '0px' }};">
+                            value="{{ clean_query(query) }}">
                         <input name="tbm" value="{{ search_type }}" style="display: none">
                         <input type="submit" style="display: none;">
                         <div class="sc"></div>

app/templates/index.html

@@ -1,4 +1,4 @@
-<html>
+<html style="background: #000;">
 	<head>
 		<link rel="apple-touch-icon" sizes="57x57" href="static/img/favicon/apple-icon-57x57.png">
 		<link rel="apple-touch-icon" sizes="60x60" href="static/img/favicon/apple-icon-60x60.png">
@@ -22,8 +22,12 @@
 		<link rel="search" href="opensearch.xml" type="application/opensearchdescription+xml" title="Whoogle Search">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<link rel="stylesheet" href="static/css/variables.css">
-		<link rel="stylesheet" href="static/css/main.css">
+        {% if config.theme  %}
+		<link rel="stylesheet" href="static/css/{{ config.theme }}-theme.css"/>
+        {% else %}
 		<link rel="stylesheet" href="static/css/{{ 'dark' if config.dark else 'light' }}-theme.css"/>
+        {% endif %}
+		<link rel="stylesheet" href="static/css/main.css">
 		<noscript>
 			<style>
 				#main { display: inherit !important; }
@@ -34,7 +38,7 @@
 		<style>{{ config.style }}</style>
 		<title>Whoogle Search</title>
 	</head>
-	<body id="main" style="display: none; background-color: {{ '#000' if config.dark else '#fff' }}">
+	<body id="main">
 		<div class="search-container">
 			<div class="logo-container">
 				{{ logo|safe }}
@@ -114,10 +118,24 @@
 					<label for="config-nojs">{{ translation['config-nojs'] }}: </label>
 					<input type="checkbox" name="nojs" id="config-nojs" {{ 'checked' if config.nojs else '' }}>
 				</div>
-				<div class="config-div config-div-dark">
-					<label for="config-dark">{{ translation['config-dark'] }}: </label>
-					<input type="checkbox" name="dark" id="config-dark" {{ 'checked' if config.dark else '' }}>
-				</div>
+                <div class="config-div config-div-theme">
+                    <label for="config-theme">{{ translation['config-theme'] }}: </label>
+                    <select name="theme" id="config-theme">
+                        {% for theme in themes %}
+                        <option value="{{ theme }}"
+                            {% if theme in config.theme %}
+                            selected
+                            {% endif %}>
+                            {{ translation[theme].capitalize() }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <!-- DEPRECATED -->
+				<!--<div class="config-div config-div-dark">-->
+					<!--<label for="config-dark">{{ translation['config-dark'] }}: </label>-->
+					<!--<input type="checkbox" name="dark" id="config-dark" {{ 'checked' if config.dark else '' }}>-->
+				<!--</div>-->
 				<div class="config-div config-div-safe">
 					<label for="config-safe">{{ translation['config-safe'] }}: </label>
 					<input type="checkbox" name="safe" id="config-safe" {{ 'checked' if config.safe else '' }}>
@@ -172,7 +190,7 @@
 		{% endif %}
 		</div>
 		<footer>
-			<p style="color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};">
+			<p class="footer">
 				Whoogle Search v{{ version_number }} ||
 				<a id="gh-link" href="https://github.com/benbusby/whoogle-search">{{ translation['github-link'] }}</a>
 			</p>

app/templates/logo.html

@@ -1,10 +1,5 @@
     <link rel="stylesheet" href="static/css/logo.css">
     <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 dark else 'var(--whoogle-logo)' }};
-            }
-        </style>
         <defs>
             <style>
             </style>

whoogle.env

@@ -32,8 +32,8 @@
 # Block websites from search results (comma-separated list)
 #WHOOGLE_CONFIG_BLOCK=pinterest.com,whitehouse.gov
 
-# Dark mode
-#WHOOGLE_CONFIG_DARK=1
+# Theme (light, dark, or system)
+#WHOOGLE_CONFIG_THEME=system
 
 # Safe search mode
 #WHOOGLE_CONFIG_SAFE=1