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.
2021-06-28 10:26:51 -04:00 · 2021-06-28 10:26:51 -04:00 · c41e0fc239
parent afd01820bb
commit c41e0fc239
17 changed files with 201 additions and 48 deletions
--- a/README.md
+++ b/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)                                  |
--- a/app.json
+++ b/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": {
--- a/app/init.py
+++ b/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'))
--- a/app/models/config.py
+++ b/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
--- a/app/routes.py
+++ b/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()
                           ],
--- a/app/static/css/dark-theme.css
+++ b/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;
+}
--- a/app/static/css/header.css
+++ b/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
+}
--- a/app/static/css/light-theme.css
+++ b/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;
+}
--- a/app/static/css/main.css
+++ b/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%;
--- a/app/static/css/system-theme.css
+++ b/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);
--- a/app/static/settings/themes.json
+++ b/app/static/settings/themes.json
@ -0,0 +1,5 @@
+[
+    "light",
+    "dark",
+    "system"
+]
--- a/app/static/settings/translations.json
+++ b/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": "පද්ධති සැකසුම"
    }
 }
--- a/app/templates/display.html
+++ b/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>
--- a/app/templates/header.html
+++ b/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>
--- a/app/templates/index.html
+++ b/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 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>
--- a/app/templates/logo.html
+++ b/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>
--- a/whoogle.env
+++ b/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