[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>
This commit is contained in:
Markus Heiser 2023-09-06 19:12:27 +02:00 committed by Markus Heiser
parent 432febd810
commit 935aed7ca4
5 changed files with 290 additions and 154 deletions

View file

@ -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();
}