1
0
mirror of https://github.com/searxng/searxng.git synced 2024-11-22 12:10:11 +01:00

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

This commit is contained in:
Alexandre Flament 2021-11-19 13:49:16 +01:00
parent f6bfc8f461
commit ec5a82fccd
9 changed files with 149 additions and 103 deletions

View File

@ -393,7 +393,13 @@ class Preferences:
'oscar-style': EnumStringSetting( 'oscar-style': EnumStringSetting(
settings['ui']['theme_args']['oscar_style'], settings['ui']['theme_args']['oscar_style'],
is_locked('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( 'advanced_search': MapSetting(
settings['ui']['advanced_search'], settings['ui']['advanced_search'],
is_locked('advanced_search'), is_locked('advanced_search'),

View File

@ -74,6 +74,8 @@ ui:
theme_args: theme_args:
# default style of oscar # default style of oscar
oscar_style: logicodev oscar_style: logicodev
# style of simple theme: auto, light, dark
simple_style: auto
# Open result links in a new tab by default # Open result links in a new tab by default
# results_on_new_tab: false # results_on_new_tab: false
# categories_order : # categories_order :

View File

@ -19,6 +19,7 @@ logger = logging.getLogger('searx')
OUTPUT_FORMATS = ['html', 'csv', 'json', 'rss'] OUTPUT_FORMATS = ['html', 'csv', 'json', 'rss']
LANGUAGE_CODES = ['all'] + list(l[0] for l in languages) LANGUAGE_CODES = ['all'] + list(l[0] for l in languages)
OSCAR_STYLE = ('logicodev', 'logicodev-dark', 'pointhi') OSCAR_STYLE = ('logicodev', 'logicodev-dark', 'pointhi')
SIMPLE_STYLE = ('auto', 'light', 'dark')
CATEGORY_ORDER = [ CATEGORY_ORDER = [
'general', 'general',
'images', 'images',
@ -183,6 +184,7 @@ SCHEMA = {
'default_locale': SettingsValue(str, ''), 'default_locale': SettingsValue(str, ''),
'theme_args': { 'theme_args': {
'oscar_style': SettingsValue(OSCAR_STYLE, 'logicodev'), 'oscar_style': SettingsValue(OSCAR_STYLE, 'logicodev'),
'simple_style': SettingsValue(SIMPLE_STYLE, 'auto'),
}, },
'results_on_new_tab': SettingsValue(bool, False), 'results_on_new_tab': SettingsValue(bool, False),
'advanced_search': SettingsValue(bool, False), 'advanced_search': SettingsValue(bool, False),

View File

@ -27,5 +27,10 @@
}; };
// update the css // 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); })(window, document);

View File

@ -106,9 +106,7 @@
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0); --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 /// Base Colors
--color-base-font: #bbb; --color-base-font: #bbb;
--color-base-font-rgb: 187, 187, 187; --color-base-font-rgb: 187, 187, 187;
@ -207,9 +205,20 @@
--color-toolkit-engine-tooltip-background: #222; --color-toolkit-engine-tooltip-background: #222;
--color-toolkit-loader-border: rgba(255, 255, 255, 0.2); --color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
--color-toolkit-loader-borderleft: rgba(0, 0, 0, 0); --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 /// General Size
@results-width: 45rem; @results-width: 45rem;
@results-offset: 10rem; @results-offset: 10rem;

View File

@ -333,10 +333,15 @@ select {
} }
@media (prefers-color-scheme: dark) { @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); 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 -- */ /* -- checkbox-onoff -- */

View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!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> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="description" content="SearXNG — a privacy-respecting, hackable metasearch engine"> <meta name="description" content="SearXNG — a privacy-respecting, hackable metasearch engine">

View File

@ -204,6 +204,17 @@
</p> </p>
<div class="description">{{ _('Change SearXNG layout') }}</div> <div class="description">{{ _('Change SearXNG layout') }}</div>
</fieldset> </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 %} {% endif %}
{% if 'results_on_new_tab' not in locked_preferences %} {% if 'results_on_new_tab' not in locked_preferences %}
<fieldset> <fieldset>

View File

@ -174,6 +174,12 @@ _category_names = (
gettext('science') gettext('science')
) )
_simple_style = (
gettext('auto'),
gettext('light'),
gettext('dark')
)
# #
timeout_text = gettext('timeout') timeout_text = gettext('timeout')
parsing_error_text = gettext('parsing error') parsing_error_text = gettext('parsing error')