diff --git a/README.md b/README.md
index 6c7fe7d..feba333 100644
--- 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) |
diff --git a/app.json b/app.json
index 1a5ef56..2962451 100644
--- 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": {
diff --git a/app/__init__.py b/app/__init__.py
index 0110966..d5faca5 100644
--- 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'))
diff --git a/app/models/config.py b/app/models/config.py
index 8413a65..f865a17 100644
--- 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
diff --git a/app/routes.py b/app/routes.py
index f5ac789..c217d59 100644
--- 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()
],
diff --git a/app/static/css/dark-theme.css b/app/static/css/dark-theme.css
index 04674f2..3ffaf51 100644
--- 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;
+}
diff --git a/app/static/css/header.css b/app/static/css/header.css
index 61f6479..441de8a 100644
--- 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
+}
diff --git a/app/static/css/light-theme.css b/app/static/css/light-theme.css
index c3d057c..2b9e431 100644
--- 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;
+}
diff --git a/app/static/css/main.css b/app/static/css/main.css
index 0a1e9cd..1dd2374 100644
--- 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%;
diff --git a/app/static/css/system-theme.css b/app/static/css/system-theme.css
new file mode 100644
index 0000000..9c243a0
--- /dev/null
+++ 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);
diff --git a/app/static/settings/themes.json b/app/static/settings/themes.json
new file mode 100644
index 0000000..eee503d
--- /dev/null
+++ b/app/static/settings/themes.json
@@ -0,0 +1,5 @@
+[
+ "light",
+ "dark",
+ "system"
+]
diff --git a/app/static/settings/translations.json b/app/static/settings/translations.json
index 230bd17..b27f279 100644
--- 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": "පද්ධති සැකසුම"
}
}
diff --git a/app/templates/display.html b/app/templates/display.html
index 44847f6..eee90a8 100644
--- a/app/templates/display.html
+++ b/app/templates/display.html
@@ -9,7 +9,11 @@
+ {% if config.theme %}
+
+ {% else %}
+ {% endif %}
{{ clean_query(query) }} - Whoogle Search
@@ -24,7 +28,7 @@
{{ response|safe }}