Add theme settings to preferences page

- Create new theme.html template for theme selection
- Update preferences page to include theme settings
- Adjust CSS padding and add save button styling
- Modify preferences template to support theme selection

searx/static/themes/smart/css/ltr-style.css

@@ -795,13 +795,20 @@ img, video {
 
 #preferences #preferences_form .madules-container {
   grid-area: main;
-  padding: 1rem;
+  padding: 1.5rem;
 }
 
 #preferences #preferences_form .madules-container select {
   background-color: var(--secondary-background-color);
 }
 
+#preferences #preferences_form .madules-container .save-btn {
+  text-align: center;
+  width: 100%;
+  margin-top: 1rem;
+  display: block;
+}
+
 #preferences #preferences_form .backup-container {
   grid-area: backup;
 }

searx/static/themes/smart/css/rtl-style.css

@@ -741,13 +741,20 @@ img, video {
 
 #preferences #preferences_form .madules-container {
   grid-area: main;
-  padding: 1rem;
+  padding: 1.5rem;
 }
 
 #preferences #preferences_form .madules-container select {
   background-color: var(--secondary-background-color);
 }
 
+#preferences #preferences_form .madules-container .save-btn {
+  text-align: center;
+  width: 100%;
+  margin-top: 1rem;
+  display: block;
+}
+
 #preferences #preferences_form .backup-container {
   grid-area: backup;
 }

searx/static/themes/smart/src/scss/preferences.scss

@@ -45,11 +45,18 @@
 
         .madules-container {
             grid-area: main;
-            padding: 1rem;
+            padding: 1.5rem;
 
             select {
                 background-color: var(--secondary-background-color);
             }
+
+            .save-btn {
+                margin-top: 1rem;
+                display: block;
+                width: 100%;
+                text-align: center;
+            }
         }
 
         .backup-container {

searx/templates/smart/madules/settings/theme.html

@@ -0,0 +1,16 @@
+<fieldset>
+  <div class="container">
+    <legend id="pref_theme">{{- _('Theme') -}}</legend>
+        <select name="theme" aria-labelledby="pref_theme" aria-describedby="desc_theme">
+          {%- for name in themes -%}
+            <option value="{{ name }}"
+                    {%- if name == theme %} selected="selected"{%- endif -%}>
+                    {{- name | capitalize -}}
+            </option>
+          {%- endfor -%}
+      </select>
+  </div>
+  <div class="description" id="desc_theme">
+    {{- _('Change SearXNG layout') -}}
+  </div>
+</fieldset>

searx/templates/smart/preferences.html

@@ -11,10 +11,17 @@
     autocomplete="off"
 >
     <div class="madules-container">
-        {% if 'language' not in locked_preferences %} {%- include
+        {# TODO: add tabs after new theme variants settings and chat
-        'smart/madules/settings/language.html' -%} {% endif %} {% if
+        <div class="tabs">
-        'autocomplete' not in locked_preferences %} {%- include
+            <label>{{ _('General') }}</label>
-        'smart/madules/settings/autocomplete.html' -%} {% endif %} {% if
+            <label>{{ _('Appearance') }}</label>
+            <label>{{ _('Advanced') }}</label>
+        </div>
+        #} {% if 'language' not in locked_preferences %} {%- include
+        'smart/madules/settings/language.html' -%}{% endif %} {% if 'theme' not
+        in locked_preferences %} {%- include 'smart/madules/settings/theme.html'
+        -%}{% endif %} {% if 'autocomplete' not in locked_preferences %} {%-
+        include 'smart/madules/settings/autocomplete.html' -%} {% endif %} {% if
         'safesearch' not in locked_preferences %} {%- include
         'smart/madules/settings/safe_search.html' -%} {% endif %} {% if
         'ui_locale' not in locked_preferences %} {%- include
@@ -34,7 +41,9 @@
         'urlformatting' not in locked_preferences %} {%- include
         'smart/madules/settings/url_formatting.html' -%} {% endif %}
 
-        <button class="btn primary" type="submit">{{- _('Save') -}}</button>
+        <button class="btn primary save-btn" type="submit">
+            {{- _('Save') -}}
+        </button>
     </div>
 
     <div class="backup-container">