diff --git a/searx/preferences.py b/searx/preferences.py
index 5ff89c969..9c549cc01 100644
--- a/searx/preferences.py
+++ b/searx/preferences.py
@@ -393,7 +393,13 @@ class Preferences:
'oscar-style': EnumStringSetting(
settings['ui']['theme_args']['oscar_style'],
is_locked('oscar-style'),
- choices=['', 'logicodev', 'logicodev-dark', 'pointhi']),
+ choices=['', 'logicodev', 'logicodev-dark', 'pointhi']
+ ),
+ 'simple_style': EnumStringSetting(
+ settings['ui']['theme_args']['simple_style'],
+ is_locked('simple_style'),
+ choices=['', 'auto', 'light', 'dark']
+ ),
'advanced_search': MapSetting(
settings['ui']['advanced_search'],
is_locked('advanced_search'),
diff --git a/searx/settings.yml b/searx/settings.yml
index 7dade563e..825392525 100644
--- a/searx/settings.yml
+++ b/searx/settings.yml
@@ -74,6 +74,8 @@ ui:
theme_args:
# default style of oscar
oscar_style: logicodev
+ # style of simple theme: auto, light, dark
+ simple_style: auto
# Open result links in a new tab by default
# results_on_new_tab: false
# categories_order :
diff --git a/searx/settings_defaults.py b/searx/settings_defaults.py
index 1a755fb8b..69b6a0fb7 100644
--- a/searx/settings_defaults.py
+++ b/searx/settings_defaults.py
@@ -19,6 +19,7 @@ logger = logging.getLogger('searx')
OUTPUT_FORMATS = ['html', 'csv', 'json', 'rss']
LANGUAGE_CODES = ['all'] + list(l[0] for l in languages)
OSCAR_STYLE = ('logicodev', 'logicodev-dark', 'pointhi')
+SIMPLE_STYLE = ('auto', 'light', 'dark')
CATEGORY_ORDER = [
'general',
'images',
@@ -183,6 +184,7 @@ SCHEMA = {
'default_locale': SettingsValue(str, ''),
'theme_args': {
'oscar_style': SettingsValue(OSCAR_STYLE, 'logicodev'),
+ 'simple_style': SettingsValue(SIMPLE_STYLE, 'auto'),
},
'results_on_new_tab': SettingsValue(bool, False),
'advanced_search': SettingsValue(bool, False),
diff --git a/searx/static/themes/simple/src/js/head/00_init.js b/searx/static/themes/simple/src/js/head/00_init.js
index d359a9174..21b1754bf 100644
--- a/searx/static/themes/simple/src/js/head/00_init.js
+++ b/searx/static/themes/simple/src/js/head/00_init.js
@@ -27,5 +27,10 @@
};
// update the css
- d.getElementsByTagName("html")[0].className = (w.searxng.touch)?"js touch":"js";
+ var hmtlElement = d.getElementsByTagName("html")[0];
+ hmtlElement.classList.remove('no-js');
+ hmtlElement.classList.add('js');
+ if (w.searxng.touch) {
+ hmtlElement.classList.add('touch');
+ }
})(window, document);
\ No newline at end of file
diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index 4902ac71f..909fb0877 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -106,110 +106,119 @@
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
}
+.dark-themes() {
+ /// Base Colors
+ --color-base-font: #bbb;
+ --color-base-font-rgb: 187, 187, 187;
+ --color-base-background: #222;
+ --color-url-font: #8af;
+ --color-url-visited-font: #96b;
+ /// Header Colors
+ --color-header-background: #181818;
+ --color-header-border: #333;
+ /// Footer Colors
+ --color-footer-background: #181818;
+ --color-footer-border: #333;
+ /// Sidebar Colors
+ --color-sidebar-border: #555;
+ --color-sidebar-font: #fff;
+ /// BackToTop Colors
+ --color-backtotop-font: #bbb;
+ --color-backtotop-border: #333;
+ --color-backtotop-background: #181818;
+ /// Button Colors
+ --color-btn-background: #58f;
+ --color-btn-font: #222;
+ /// Search Input Colors
+ --color-search-border: #555;
+ --color-search-background: #222;
+ --color-search-font: #fff;
+ --color-search-background-hover: #58f;
+ /// Modal Colors
+ --color-error: #f55b5b;
+ --color-error-background: darken(#db3434, 40%);
+ --color-warning: #f1d561;
+ --color-warning-background: darken(#dbba34, 40%);
+ --color-success: #79f56e;
+ --color-success-background: darken(#42db34, 40%);
+ /// Categories Colors
+ --color-categories-item-selected-font: #58f;
+ --color-categories-item-border-selected: #58f;
+ /// Autocomplete Colors
+ --color-autocomplete-font: #fff;
+ --color-autocomplete-border: #555;
+ --color-autocomplete-background: #222;
+ --color-autocomplete-background-hover: #181818;
+ /// Answer Colors
+ --color-answer-border: #333; // same as --color-header-border
+ --color-answer-font: #bbb; // same as --color-base-font
+ --color-answer-background: #181818; // same as --color-header-background:
+ /// Results Colors
+ --color-result-border: #333;
+ --color-result-url-font: #fff;
+ --color-result-vim-selected: #181818;
+ --color-result-vim-arrow: #8af;
+ --color-result-description-highlight-font: #fff;
+ --color-result-link-font: #8af;
+ --color-result-link-font-highlight: #8af;
+ --color-result-link-visited-font: #96b;
+ --color-result-publishdate-font: #777;
+ --color-result-engines-font: #777;
+ --color-result-search-url-border: #555;
+ --color-result-search-url-font: #fff;
+ /// Detail modal : same as the light version
+ --color-result-detail-font: #fff;
+ --color-result-detail-label-font: lightgray;
+ --color-result-detail-background: #000;
+ --color-result-detail-hr: #555;
+ --color-result-detail-link: #8af;
+ --color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
+ --color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
+ // Images Colors
+ --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
+ --color-result-image-span-font: #fff;
+ --color-result-image-background: #8af;
+ /// Settings Colors
+ --color-settings-tr-hover: #2d2d2d;
+ --color-settings-engine-description-font: darken(#dcdcdc, 30%);
+ /// Toolkit Colors
+ --color-toolkit-badge-font: #fff;
+ --color-toolkit-badge-background: #777;
+ --color-toolkit-kbd-font: #000;
+ --color-toolkit-kbd-background: #fff;
+ --color-toolkit-dialog-border: #555;
+ --color-toolkit-dialog-background: #222;
+ --color-toolkit-tabs-label-border: #222;
+ --color-toolkit-tabs-section-border: #555;
+ --color-toolkit-select-border: #555;
+ --color-toolkit-select-border-hover: #777;
+ --color-toolkit-input-text-font: #fff;
+ --color-toolkit-input-text-border: #555;
+ --color-toolkit-input-text-border-hover: #777;
+ --color-toolkit-checkbox-onoff-background: #3c3b31;
+ --color-toolkit-checkbox-onoff-label-background: #58f;
+ --color-toolkit-checkbox-onoff-checked-background: #ddd;
+ --color-toolkit-checkbox-label-background: #fff;
+ --color-toolkit-checkbox-label-border: #333;
+ --color-toolkit-checkbox-input-border: #58f;
+ --color-toolkit-engine-tooltip-border: #333;
+ --color-toolkit-engine-tooltip-background: #222;
+ --color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
+ --color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
+}
+
/// Dark Theme (autoswitch based on device pref)
@media (prefers-color-scheme: dark) {
- :root {
- /// Base Colors
- --color-base-font: #bbb;
- --color-base-font-rgb: 187, 187, 187;
- --color-base-background: #222;
- --color-url-font: #8af;
- --color-url-visited-font: #96b;
- /// Header Colors
- --color-header-background: #181818;
- --color-header-border: #333;
- /// Footer Colors
- --color-footer-background: #181818;
- --color-footer-border: #333;
- /// Sidebar Colors
- --color-sidebar-border: #555;
- --color-sidebar-font: #fff;
- /// BackToTop Colors
- --color-backtotop-font: #bbb;
- --color-backtotop-border: #333;
- --color-backtotop-background: #181818;
- /// Button Colors
- --color-btn-background: #58f;
- --color-btn-font: #222;
- /// Search Input Colors
- --color-search-border: #555;
- --color-search-background: #222;
- --color-search-font: #fff;
- --color-search-background-hover: #58f;
- /// Modal Colors
- --color-error: #f55b5b;
- --color-error-background: darken(#db3434, 40%);
- --color-warning: #f1d561;
- --color-warning-background: darken(#dbba34, 40%);
- --color-success: #79f56e;
- --color-success-background: darken(#42db34, 40%);
- /// Categories Colors
- --color-categories-item-selected-font: #58f;
- --color-categories-item-border-selected: #58f;
- /// Autocomplete Colors
- --color-autocomplete-font: #fff;
- --color-autocomplete-border: #555;
- --color-autocomplete-background: #222;
- --color-autocomplete-background-hover: #181818;
- /// Answer Colors
- --color-answer-border: #333; // same as --color-header-border
- --color-answer-font: #bbb; // same as --color-base-font
- --color-answer-background: #181818; // same as --color-header-background:
- /// Results Colors
- --color-result-border: #333;
- --color-result-url-font: #fff;
- --color-result-vim-selected: #181818;
- --color-result-vim-arrow: #8af;
- --color-result-description-highlight-font: #fff;
- --color-result-link-font: #8af;
- --color-result-link-font-highlight: #8af;
- --color-result-link-visited-font: #96b;
- --color-result-publishdate-font: #777;
- --color-result-engines-font: #777;
- --color-result-search-url-border: #555;
- --color-result-search-url-font: #fff;
- /// Detail modal : same as the light version
- --color-result-detail-font: #fff;
- --color-result-detail-label-font: lightgray;
- --color-result-detail-background: #000;
- --color-result-detail-hr: #555;
- --color-result-detail-link: #8af;
- --color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
- --color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
- // Images Colors
- --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
- --color-result-image-span-font: #fff;
- --color-result-image-background: #8af;
- /// Settings Colors
- --color-settings-tr-hover: #2d2d2d;
- --color-settings-engine-description-font: darken(#dcdcdc, 30%);
- /// Toolkit Colors
- --color-toolkit-badge-font: #fff;
- --color-toolkit-badge-background: #777;
- --color-toolkit-kbd-font: #000;
- --color-toolkit-kbd-background: #fff;
- --color-toolkit-dialog-border: #555;
- --color-toolkit-dialog-background: #222;
- --color-toolkit-tabs-label-border: #222;
- --color-toolkit-tabs-section-border: #555;
- --color-toolkit-select-border: #555;
- --color-toolkit-select-border-hover: #777;
- --color-toolkit-input-text-font: #fff;
- --color-toolkit-input-text-border: #555;
- --color-toolkit-input-text-border-hover: #777;
- --color-toolkit-checkbox-onoff-background: #3c3b31;
- --color-toolkit-checkbox-onoff-label-background: #58f;
- --color-toolkit-checkbox-onoff-checked-background: #ddd;
- --color-toolkit-checkbox-label-background: #fff;
- --color-toolkit-checkbox-label-border: #333;
- --color-toolkit-checkbox-input-border: #58f;
- --color-toolkit-engine-tooltip-border: #333;
- --color-toolkit-engine-tooltip-background: #222;
- --color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
- --color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
+ :root.theme-auto {
+ .dark-themes();
}
}
+// Dark Theme by preferences
+:root.theme-dark {
+ .dark-themes();
+}
+
/// General Size
@results-width: 45rem;
@results-offset: 10rem;
diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less
index 195cd9af4..f8ae3c1bb 100644
--- a/searx/static/themes/simple/src/less/toolkit.less
+++ b/searx/static/themes/simple/src/less/toolkit.less
@@ -333,10 +333,15 @@ select {
}
@media (prefers-color-scheme: dark) {
- select {
+ html.theme-auto select,
+ html.theme-dark select {
background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path);
}
}
+
+ html.theme-dark select {
+ background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path);
+ }
}
/* -- checkbox-onoff -- */
diff --git a/searx/templates/simple/base.html b/searx/templates/simple/base.html
index 093b380f9..52a5e5192 100644
--- a/searx/templates/simple/base.html
+++ b/searx/templates/simple/base.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html class="no-js" lang="{{ locale_rfc5646 }}" {% if rtl %} dir="rtl"{% endif %}>
+<html class="no-js theme-{{ preferences.get_value('simple_style') or 'auto' }}" lang="{{ locale_rfc5646 }}" {% if rtl %} dir="rtl"{% endif %}>
<head>
<meta charset="UTF-8" />
<meta name="description" content="SearXNG — a privacy-respecting, hackable metasearch engine">
diff --git a/searx/templates/simple/preferences.html b/searx/templates/simple/preferences.html
index ec3bd8ed2..23f6355f5 100644
--- a/searx/templates/simple/preferences.html
+++ b/searx/templates/simple/preferences.html
@@ -204,6 +204,17 @@
</p>
<div class="description">{{ _('Change SearXNG layout') }}</div>
</fieldset>
+ <fieldset>
+ <legend>{{ _('Theme style') }}</legend>
+ <p class="value">
+ <select name="simple_style">
+ {%- for name in ['auto', 'light', 'dark'] -%}
+ <option value="{{ name }}" {% if name == preferences.get_value('simple_style') %}selected="selected"{% endif %}>{{ _(name) }}</option>
+ {%- endfor -%}
+ </select>
+ </p>
+ <div class="description">{{ _('Choose auto to follow your browser settings') }}</div>
+ </fieldset>
{% endif %}
{% if 'results_on_new_tab' not in locked_preferences %}
<fieldset>
diff --git a/searx/webapp.py b/searx/webapp.py
index 98480e4b6..4dd7ec723 100755
--- a/searx/webapp.py
+++ b/searx/webapp.py
@@ -174,6 +174,12 @@ _category_names = (
gettext('science')
)
+_simple_style = (
+ gettext('auto'),
+ gettext('light'),
+ gettext('dark')
+)
+
#
timeout_text = gettext('timeout')
parsing_error_text = gettext('parsing error')