[feature] dark theme for code highlighter in the result list

Closes: https://github.com/searxng/searxng/issues/1354

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

1 files changed, 49 insertions, 7 deletions

diff --git a/searx/static/themes/simple/src/less/code.less b/searx/static/themes/simple/src/less/code.less
index f4e6735ba..d6553feb8 100644
--- a/searx/static/themes/simple/src/less/code.less
+++ b/searx/static/themes/simple/src/less/code.less
@@ -1,9 +1,51 @@
-.code-highlight pre {
-  overflow: auto;
-  background-color: inherit;
-  color: inherit;
-  border: inherit;
+@import "../generated/pygments.less";
+
+.codelines {
+  margin: @results-margin 0 0 0;
+  padding: @result-padding 0 0 0;
 }
 
-// stylelint-disable no-invalid-position-at-import-rule
-@import "../generated/pygments.less";
+.code-highlight-sxng() {
+  .code-highlight {
+    pre {
+      overflow: auto;
+      margin: 0;
+      padding: 0 0 0.75rem 0;
+    }
+
+    .linenos {
+      user-select: none;
+      cursor: default;
+
+      &::selection {
+        background: transparent; /* WebKit/Blink Browsers */
+      }
+
+      &::-moz-selection {
+        background: transparent; /* Gecko Browsers */
+      }
+      margin-right: 8px;
+      text-align: right;
+    }
+
+    span.linenos {
+      color: #64708d;
+    }
+  }
+}
+
+.code-highlight-sxng();
+
+/// Dark Theme (autoswitch based on device pref)
+@media (prefers-color-scheme: dark) {
+  :root.theme-auto {
+    .code-highlight-dark();
+    .code-highlight-sxng();
+  }
+}
+
+// Dark Theme by preferences
+:root.theme-dark {
+  .code-highlight-dark();
+  .code-highlight-sxng();
+}