feat(searxng): add accent support and fix auto themes (#118)

.gitignore

@@ -2,3 +2,4 @@ deno_cache/
 node_modules/
 .DS_Store
 .idea
+.vscode

styles/searxng/catppuccin.user.css

@@ -2,7 +2,7 @@
 @name           SearXNG Catppuccin
 @namespace      github.com/catppuccin/userstyles/styles/searxng
 @homepageURL    https://github.com/catppuccin/userstyles/tree/main/styles/searxng
-@version        0.2.2
+@version        0.3.0
 @description    Soothing pastel theme for SearXNG
 @author         Catppuccin
 @updateURL      https://github.com/catppuccin/userstyles/raw/main/styles/searxng/catppuccin.user.css
@@ -11,6 +11,7 @@
 @preprocessor less
 @var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"]
 @var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"]
+@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Grey"]
 @var checkbox additions "Additional Tweaks" 0
 ==/UserStyle== */
 @-moz-document url-prefix("http://ransack.i2p/"),
@@ -126,8 +127,8 @@ url-prefix("https://trydex.tk/searxng/"),
 url-prefix("https://www.gruble.de/"),
 url-prefix("https://www.webrats.xyz/"),
 url-prefix("https://xcxc.ml/"),
-url-prefix("https://xo.wtf/") {
+url-prefix("https://xo.wtf/")
-
+{
   @catppuccin: {
     @latte: {
       @rosewater: #dc8a78;
@@ -156,7 +157,7 @@ url-prefix("https://xo.wtf/") {
       @base: #eff1f5;
       @mantle: #e6e9ef;
       @crust: #dce0e8;
-    }
+    };
     @frappe: {
       @rosewater: #f2d5cf;
       @flamingo: #eebebe;
@@ -184,7 +185,7 @@ url-prefix("https://xo.wtf/") {
       @base: #303446;
       @mantle: #292c3c;
       @crust: #232634;
-    }
+    };
     @macchiato: {
       @rosewater: #f4dbd6;
       @flamingo: #f0c6c6;
@@ -212,7 +213,7 @@ url-prefix("https://xo.wtf/") {
       @base: #24273a;
       @mantle: #1e2030;
       @crust: #181926;
-    }
+    };
     @mocha: {
       @rosewater: #f5e0dc;
       @flamingo: #f2cdcd;
@@ -240,18 +241,27 @@ url-prefix("https://xo.wtf/") {
       @base: #1e1e2e;
       @mantle: #181825;
       @crust: #11111b;
+    };
+  };
+
+  :root.theme-auto {
+    #catppuccin(@lightFlavor, @accentColor);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root.theme-auto {
+      #catppuccin(@darkFlavor, @accentColor);
     }
   }
 
-  :root.theme-auto,
   :root.theme-dark {
-    #catppuccin(@darkFlavor);
+    #catppuccin(@darkFlavor, @accentColor);
   }
   :root.theme-light {
-    #catppuccin(@lightFlavor);
+    #catppuccin(@lightFlavor, @accentColor);
   }
 
-  #catppuccin(@lookup) {
+  #catppuccin(@lookup, @accent-color) {
     @rosewater: @catppuccin[@@lookup][@rosewater];
     @flamingo: @catppuccin[@@lookup][@flamingo];
     @pink: @catppuccin[@@lookup][@pink];
@@ -278,13 +288,14 @@ url-prefix("https://xo.wtf/") {
     @base: @catppuccin[@@lookup][@base];
     @mantle: @catppuccin[@@lookup][@mantle];
     @crust: @catppuccin[@@lookup][@crust];
+    @accent: @catppuccin[@@lookup][@@accent-color];
 
     & {
       --color-base-font: @text;
       --color-base-background: @base;
       --color-base-background-mobile: @base;
-      --color-url-font: @lavender;
+      --color-url-font: @accent;
-      --color-url-visited-font: @mauve;
+      --color-url-visited-font: @accent;
       --color-header-background: @mantle;
       --color-header-border: @mantle;
       --color-footer-background: @mantle;
@@ -295,15 +306,15 @@ url-prefix("https://xo.wtf/") {
       --color-backtotop-font: @subtext1;
       --color-backtotop-border: @surface0;
       --color-backtotop-background: @surface0;
-      --color-btn-background: @lavender;
+      --color-btn-background: @accent;
       --color-btn-font: @base;
-      --color-show-btn-background: @lavender;
+      --color-show-btn-background: @accent;
       --color-show-btn-font: @base;
       --color-search-border: @surface0;
       --color-search-shadow: 0 2px 8px @crust;
       --color-search-background: @surface0;
       --color-search-font: @text;
-      --color-search-background-hover: @lavender;
+      --color-search-background-hover: @accent;
       --color-error: @red;
       --color-error-background: @surface0;
       --color-warning: @yellow;
@@ -311,7 +322,7 @@ url-prefix("https://xo.wtf/") {
       --color-success: @green;
       --color-success-background: @surface0;
       --color-categories-item-selected-font: @text;
-      --color-categories-item-border-selected: @mauve;
+      --color-categories-item-border-selected: @accent;
       --color-autocomplete-font: @subtext1;
       --color-autocomplete-border: @surface0;
       --color-autocomplete-shadow: 0 2px 8px @crust;
@@ -323,11 +334,11 @@ url-prefix("https://xo.wtf/") {
       --color-result-border: @base;
       --color-result-url-font: @subtext1;
       --color-result-vim-selected: @surface0;
-      --color-result-vim-arrow: @lavender;
+      --color-result-vim-arrow: @accent;
       --color-result-description-highlight-font: @text;
-      --color-result-link-font: @lavender;
+      --color-result-link-font: @accent;
-      --color-result-link-font-highlight: @lavender;
+      --color-result-link-font-highlight: @accent;
-      --color-result-link-visited-font: @mauve;
+      --color-result-link-visited-font: @accent;
       --color-result-publishdate-font: @surface2;
       --color-result-engines-font: @surface2;
       --color-result-search-url-border: @surface2;
@@ -336,7 +347,7 @@ url-prefix("https://xo.wtf/") {
       --color-result-detail-label-font: @surface1;
       --color-result-detail-background: @base;
       --color-result-detail-hr: @base;
-      --color-result-detail-link: @lavender;
+      --color-result-detail-link: @accent;
       --color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
       --color-result-detail-loader-borderleft: @crust;
       --color-result-image-span-font: @text;
@@ -365,7 +376,7 @@ url-prefix("https://xo.wtf/") {
       --color-toolkit-checkbox-onoff-off-mark-color: @mantle;
       --color-toolkit-checkbox-label-background: @base;
       --color-toolkit-checkbox-label-border: @mantle;
-      --color-toolkit-checkbox-input-border: @blue;
+      --color-toolkit-checkbox-input-border: @accent;
       --color-toolkit-engine-tooltip-border: @surface0;
       --color-toolkit-engine-tooltip-background: @surface0;
       --color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
@@ -373,16 +384,24 @@ url-prefix("https://xo.wtf/") {
       --color-doc-code: @rosewater;
       --color-doc-code-background: @mantle;
     }
+
+    #search_logo svg :not([fill="none"]) {
+      fill: @accent;
+    }
+    #search_logo svg :not([stroke="none"]) {
+      stroke: @accent;
+    }
+
     if (additions) {
       article.result {
         background-color: var(--color-result-background);
-        border-radius: .75em;
+        border-radius: 0.75em;
-        padding: .75em;
+        padding: 0.75em;
-        margin: .5em;
+        margin: 0.5em;
       }
       article.category-images {
         padding-bottom: 4em;
       }
     }
   }
-}
+}