Merge pull request #521 from dalf/simple-theme-style-pref

Simple theme: allow the user to choose auto, light, dark style

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'),

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 :

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),

searx/static/themes/simple/css/searxng-rtl.css

@@ -819,7 +819,7 @@ template {
   --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
 }
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root.theme-auto {
     --color-base-font: #bbb;
     --color-base-font-rgb: 187, 187, 187;
     --color-base-background: #222;
@@ -904,6 +904,90 @@ template {
     --color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
   }
 }
+:root.theme-dark {
+  --color-base-font: #bbb;
+  --color-base-font-rgb: 187, 187, 187;
+  --color-base-background: #222;
+  --color-url-font: #8af;
+  --color-url-visited-font: #96b;
+  --color-header-background: #181818;
+  --color-header-border: #333;
+  --color-footer-background: #181818;
+  --color-footer-border: #333;
+  --color-sidebar-border: #555;
+  --color-sidebar-font: #fff;
+  --color-backtotop-font: #bbb;
+  --color-backtotop-border: #333;
+  --color-backtotop-background: #181818;
+  --color-btn-background: #58f;
+  --color-btn-font: #222;
+  --color-search-border: #555;
+  --color-search-background: #222;
+  --color-search-font: #fff;
+  --color-search-background-hover: #58f;
+  --color-error: #f55b5b;
+  --color-error-background: #390a0a;
+  --color-warning: #f1d561;
+  --color-warning-background: #39300a;
+  --color-success: #79f56e;
+  --color-success-background: #0e390a;
+  --color-categories-item-selected-font: #58f;
+  --color-categories-item-border-selected: #58f;
+  --color-autocomplete-font: #fff;
+  --color-autocomplete-border: #555;
+  --color-autocomplete-background: #222;
+  --color-autocomplete-background-hover: #181818;
+  --color-answer-border: #333;
+  --color-answer-font: #bbb;
+  --color-answer-background: #181818;
+  --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;
+  --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);
+  --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
+  --color-result-image-span-font: #fff;
+  --color-result-image-background: #8af;
+  --color-settings-tr-hover: #2d2d2d;
+  --color-settings-engine-description-font: #909090;
+  --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);
+}
 /*
 * SearXNG, A privacy-respecting, hackable metasearch engine
 */
@@ -1601,10 +1685,14 @@ select:focus {
     background-color: var(--color-base-background);
   }
   @media (prefers-color-scheme: dark) {
-    select {
+    html.theme-auto select,
+    html.theme-dark select {
       background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20fill%3D%22%23ddd%22%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
     }
   }
+  html.theme-dark select {
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20fill%3D%22%23ddd%22%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
+  }
 }
 /* -- checkbox-onoff -- */
 @supports (border-radius: 50px) {

searx/static/themes/simple/css/searxng.css

@@ -819,7 +819,7 @@ template {
   --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
 }
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root.theme-auto {
     --color-base-font: #bbb;
     --color-base-font-rgb: 187, 187, 187;
     --color-base-background: #222;
@@ -904,6 +904,90 @@ template {
     --color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
   }
 }
+:root.theme-dark {
+  --color-base-font: #bbb;
+  --color-base-font-rgb: 187, 187, 187;
+  --color-base-background: #222;
+  --color-url-font: #8af;
+  --color-url-visited-font: #96b;
+  --color-header-background: #181818;
+  --color-header-border: #333;
+  --color-footer-background: #181818;
+  --color-footer-border: #333;
+  --color-sidebar-border: #555;
+  --color-sidebar-font: #fff;
+  --color-backtotop-font: #bbb;
+  --color-backtotop-border: #333;
+  --color-backtotop-background: #181818;
+  --color-btn-background: #58f;
+  --color-btn-font: #222;
+  --color-search-border: #555;
+  --color-search-background: #222;
+  --color-search-font: #fff;
+  --color-search-background-hover: #58f;
+  --color-error: #f55b5b;
+  --color-error-background: #390a0a;
+  --color-warning: #f1d561;
+  --color-warning-background: #39300a;
+  --color-success: #79f56e;
+  --color-success-background: #0e390a;
+  --color-categories-item-selected-font: #58f;
+  --color-categories-item-border-selected: #58f;
+  --color-autocomplete-font: #fff;
+  --color-autocomplete-border: #555;
+  --color-autocomplete-background: #222;
+  --color-autocomplete-background-hover: #181818;
+  --color-answer-border: #333;
+  --color-answer-font: #bbb;
+  --color-answer-background: #181818;
+  --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;
+  --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);
+  --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
+  --color-result-image-span-font: #fff;
+  --color-result-image-background: #8af;
+  --color-settings-tr-hover: #2d2d2d;
+  --color-settings-engine-description-font: #909090;
+  --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);
+}
 /*
 * SearXNG, A privacy-respecting, hackable metasearch engine
 */
@@ -1601,10 +1685,14 @@ select:focus {
     background-color: var(--color-base-background);
   }
   @media (prefers-color-scheme: dark) {
-    select {
+    html.theme-auto select,
+    html.theme-dark select {
       background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20fill%3D%22%23ddd%22%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
     }
   }
+  html.theme-dark select {
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20fill%3D%22%23ddd%22%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
+  }
 }
 /* -- checkbox-onoff -- */
 @supports (border-radius: 50px) {

searx/static/themes/simple/js/searxng.head.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);

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);

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)
+.dark-themes() {
-@media (prefers-color-scheme: dark) {
-  :root {
   /// 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;

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 -- */

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">

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>

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')