[enh] simple theme: add "simple-style" preferences

3 years ago · ec5a82fccd
parent f6bfc8f461
commit ec5a82fccd
9 changed files with 149 additions and 103 deletions
--- 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'),
--- 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 :
--- 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),
--- 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);
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@ -106,9 +106,7 @@
  --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
 }

-/// Dark Theme (autoswitch based on device pref)
-@media (prefers-color-scheme: dark) {
-  :root {
+.dark-themes() {
  /// Base Colors
  --color-base-font: #bbb;
  --color-base-font-rgb: 187, 187, 187;
@ -207,9 +205,20 @@
  --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.theme-auto {
+    .dark-themes();
  }
 }

+// Dark Theme by preferences
+:root.theme-dark {
+  .dark-themes();
+}
+
 /// General Size
@results-width: 45rem;
@results-offset: 10rem;
--- 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 -- */
--- 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">
--- 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>
--- 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')