feat(homepage): darker background with brighter items and other misc. changes (catppuccin#915)

* changed search bar border, hover color, api error box color, and default @-moz-document domain

fixed sel

* change search bar icon

* change search bar border

* change theme to have dark background with bright items to better match original theme

Author: BPplays

styles/homepage/catppuccin.user.css

@@ -2,7 +2,7 @@
 @name homepage Catppuccin
 @namespace github.com/catppuccin/userstyles/styles/homepage
 @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/homepage
-@version 0.0.3
+@version 0.0.4
 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/homepage/catppuccin.user.css
 @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahomepage
 @description Soothing pastel theme for homepage
@@ -15,7 +15,7 @@
 @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:Gray"]
 ==/UserStyle== */
 
-@-moz-document domain("homepage.example.com") {
+@-moz-document domain("homepage.example.com"), regexp("https?://homepage\\..*") {
   @media (prefers-color-scheme: light) {
     :root {
       #catppuccin(@lightFlavor, @accentColor);
@@ -73,11 +73,11 @@
 
     :is(.dark .dark\:bg-theme-800) {
       --tw-bg-opacity: 1;
-      background-color: @base; //background Color
+      background-color: @mantle; //background Color
     }
 
     .dark {
-      --bg-color: @base;
+      --bg-color: @mantle;
       --scrollbar-thumb: @accent-color; //ScrollBar
       --scrollbar-track: @mantle; //Scrollbar base
     }
@@ -94,10 +94,10 @@
     }
     .border-theme-300 {
       --tw-border-opacity: 1;
-      border-color: @accent-color !important; //Search bar Border (important is needed so top separator doesn't override)
+      border-color: @surface0 !important; //Search bar Border (important is needed so top separator doesn't override)
     }
     :is(.dark .dark\:bg-white\/10) {
-      background-color: @crust //Search bar background
+      background-color: @base //Search bar background
 ;
     }
     :is(.dark .dark\:focus\:ring-white\/50:focus) {
@@ -113,7 +113,7 @@
     // Services Level Features
 
     :is(.dark .dark\:bg-white\/5) {
-      background-color: @mantle; //Box Background
+      background-color: @base; //Box Background
     }
     :is(.dark .dark\:shadow-theme-900\/20) {
       --tw-shadow-color: @mantle; //Box Shadows
@@ -147,7 +147,7 @@
 
     .bg-rose-900\/80 {
       --tw-border-opacity: 1;
-      background-color: @accent-color; // api error box color
+      background-color: @red; // api error box color
     }
     //
 
@@ -156,17 +156,17 @@
       color: @text; // update and version text
     }
 
+    .text-white {
+      color: @subtext1; // search bar icon
+    }
+
     :is(.dark .dark\:border-theme-200\/50) {
       --tw-border-opacity: 1;
       border-color: @surface2; // top separator
     }
 
     :is(.dark .dark\:hover\:text-theme-300:hover) {
       --tw-text-opacity: 1;
-      color: darken(
-        @accent-color,
-        10%
-      ); //Section Names + Container Description Hover Color
     }
     :is(.dark .dark\:text-theme-200) {
       --tw-text-opacity: 1;