From d0a31645145aa34dc41e0f4defcdf8c909b10416 Mon Sep 17 00:00:00 2001
From: Alexandre Flament <alex@al-f.net>
Date: Sat, 30 Oct 2021 11:51:52 +0200
Subject: [PATCH] [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.
---
 .../themes/simple/src/less/definitions.less       |   4 ++++
 searx/static/themes/simple/src/less/toolkit.less  |   8 +++++++-
 .../static/themes/simple/src/svg/select-dark.svg  | Bin 0 -> 196 bytes
 .../static/themes/simple/src/svg/select-light.svg | Bin 0 -> 184 bytes
 4 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 searx/static/themes/simple/src/svg/select-dark.svg
 create mode 100644 searx/static/themes/simple/src/svg/select-light.svg

diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index 244bd817d..d99cca713 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/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";
diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less
index 74cc55f0c..681da43e7 100644
--- a/searx/static/themes/simple/src/less/toolkit.less
+++ b/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 -- */
diff --git a/searx/static/themes/simple/src/svg/select-dark.svg b/searx/static/themes/simple/src/svg/select-dark.svg
new file mode 100644
index 0000000000000000000000000000000000000000..97335cea5e0f74c7eedd81d591e168fbf9f9a53f
GIT binary patch
literal 196
zcmXYqO%B2!6omJl;^n!m<)_wE12pj}LV*OKX|dGXOA{Bfn9MgbV%*;WHnXfgMTxAX
z2qwOg_R&iG<mocts7_+tEL1YC5?#*ogOE~6Te>zamT*cbsRTmtIy;Fy;|R`p>+;`h
z-jrwBB~qYJ<3m_?trBwzUz;LKJ_Lzptu?}&e9ZNW@u6XN4!plL9jDL@*TW-Gg4kL=
GUeym2>Nu(Z

literal 0
HcmV?d00001

diff --git a/searx/static/themes/simple/src/svg/select-light.svg b/searx/static/themes/simple/src/svg/select-light.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3b707f0189d531d4efb8896434b3228a72ce6d1d
GIT binary patch
literal 184
zcmXYq%?`pK5QOhO#b(d7{M4FifF{0*MIfmxX|dF|mnI(OFqv;=)VRNA*zB?fiW)`B
z5o~<Y6r$7k$*=Q(qdBQ{b5O~+YV<j$J7cAkwsb8mj!Dirs{}#`Q}!BrArZU{&gZ|`
yf-Mi)HFDrk<3m_?ol%MAucHWwLd<nv$e|H839`R7o#fCBm%}47in&@jp3Dzmi!~Df

literal 0
HcmV?d00001