[fix] simple theme: /preferences: dark theme version for select widgets

It is not possible to use CSS variable in a SVG when this is in a background.
This commit adds two .svg files, less converts them into data URL.
The two files are indentical except the fill color.

searx/static/themes/simple/src/less/definitions.less

@@ -232,3 +232,7 @@ html {
 @icon-font-name:          "glyphicons-halflings-regular";
 //** Element ID within SVG icon file.
 @icon-font-svg-id:        "glyphicons_halflingsregular";
+
+// decoration of the select HTML elements
+@select-light-svg-path:   "../svg/select-light.svg";
+@select-dark-svg-path:    "../svg/select-dark.svg";

searx/static/themes/simple/src/less/toolkit.less

@@ -328,7 +328,7 @@ select {
     -moz-appearance: none;
     border: none;
     border-bottom: 1px solid var(--color-toolkit-select-border);
-    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTI4LDE5MiAyNTYsMzIwIDM4NCwxOTIiLz48L2c+PC9zdmc+Cg==) no-repeat;
+    background: data-uri('image/svg+xml;charset=UTF-8', @select-light-svg-path) no-repeat;
     background-position-x: 105%;
     background-size: 2em;
     background-origin: content-box;
@@ -339,6 +339,12 @@ select {
       border-bottom: 1px solid var(--color-search-border);
     }
   }
+
+  @media (prefers-color-scheme: dark) {
+    select {
+      background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path);
+    }
+  }
 }
 
 /* -- checkbox-onoff -- */

searx/static/themes/simple/src/svg/select-dark.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+<g><polygon fill="#ddd" points="128,192 256,320 384,192"/></g>
+</svg>

searx/static/themes/simple/src/svg/select-light.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+<g><polygon points="128,192 256,320 384,192"/></g>
+</svg>