Modify theme Courgette to add colors

Two colors are needed so I use a space in the cookie and a split in jinja to "encode" and "decode" them.
We should enforce that each theme if they must use a cookie, prefix its name with the name of the theme.

The color proposed here are based on bootstrap. We could use others.

searx/templates/courgette/base.html

@@ -8,6 +8,11 @@
         <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=1" />
         <title>{% block title %}{% endblock %}searx</title>
         <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" type="text/css" media="screen" />
+        {% if cookies['courgette-color'] %}
+        <style type="text/css">
+        {% include 'courgette/color.css' %}
+        </style>
+        {% endif %}
         <link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.png') }}?v=2" />
         {% block styles %}
         {% endblock %}

searx/templates/courgette/color.css

@@ -0,0 +1,34 @@
+ .autocompleter-choices li:hover,
+.checkbox_container label:hover,
+.checkbox_container input[type="checkbox"]:checked + label,
+#sidebar,
+#suggestions input[type="submit"]:hover,
+#suggestions input[type="submit"]:focus,
+input[type="submit"],
+.engine_checkbox label,
+.engine_checkbox .deny,
+#search_submit{
+	background-color: {{ cookies['courgette-color'].split()[0] }};
+}
+
+.result_title a,
+.row a,
+.title h1{
+	color: {{ cookies['courgette-color'].split()[0] }};
+}
+
+#answers {
+	border-color: {{ cookies['courgette-color'].split()[0] }};
+}
+
+#search_submit:hover,
+#search_submit:focus,
+#sidebar input[type="submit"]:hover,
+#sidebar input[type="submit"]:focus {
+	background-color: {{ cookies['courgette-color'].split()[1] }};
+}
+
+input[type="submit"]:hover,
+input[type="submit"]:focus {
+	background: {{ cookies['courgette-color'].split()[1] }};
+}

searx/templates/courgette/preferences.html

@@ -70,6 +70,19 @@
         </p>
     </fieldset>
     <fieldset>
+        <legend>{{ _('Color') }}</legend>
+        <p>
+            <select name="courgette-color">
+                <option value="#3498DB #0665A2" {% if cookies['courgette-color'] and cookies['courgette-color'] == '#3498DB #0665A2' %}selected="selected"{% endif %}>{{ _('Blue (default)') }}</option>
+                <option value="#6F5499 #563D7C" {% if cookies['courgette-color'] and cookies['courgette-color'] == '#6F5499 #563D7C' %}selected="selected"{% endif %}>{{ _('Violet') }}</option>
+                <option value="#5CB85C #449D44" {% if cookies['courgette-color'] and cookies['courgette-color'] == '#5CB85C #449D44' %}selected="selected"{% endif %}>{{ _('Green') }}</option>
+                <option value="#5BC0DE #31B0D5" {% if cookies['courgette-color'] and cookies['courgette-color'] == '#5BC0DE #31B0D5' %}selected="selected"{% endif %}>{{ _('Cyan') }}</option>
+                <option value="#F0AD4E #EC971F" {% if cookies['courgette-color'] and cookies['courgette-color'] == '#F0AD4E #EC971F' %}selected="selected"{% endif %}>{{ _('Orange') }}</option>
+                <option value="#D9534F #C9302C" {% if cookies['courgette-color'] and cookies['courgette-color'] == '#D9534F #C9302C' %}selected="selected"{% endif %}>{{ _('Red') }}</option>
+            </select>
+        </p>
+    </fieldset>
+    <fieldset>
         <legend>{{ _('Currently used search engines') }}</legend>
 
         <table>