style(launcher): update theming and add custom color selector

styles/launcher.css

@@ -192,21 +192,13 @@
 }
 
 #wallpaper-icons:selected {
-  background-color: var(--surface-bright);
-  border-radius: 0px;
-}
-
-#wallpaper-icons:hover {
-  background-color: var(--surface-bright);
+  background-color: var(--outline);
   border-radius: 0px;
 }
 
 #scheme-dropdown {
-  background-color: var(--surface-container);
+  background-color: var(--surface);
   padding: 8px;
-  border-radius: 11px;
-  margin-top: 12px;
-  margin-bottom: 12px;
 }
 
 #scheme-dropdown > * > * {
@@ -222,18 +214,24 @@
   background-color: var(--surface-bright);
 }
 
+#search-entry-walls {
+  min-width: 512px;
+}
+
 /* Customize the overall switch appearance */
-#matugen-switcher {
+#matugen-switcher,
+#dnd-switch {
   min-width: 40px;
   min-height: 20px;
-  background-color: var(--surface-variant);
+  background-color: var(--surface);
   border-radius: 15px;
   padding: 2px;
   transition: background-color 0.3s ease;
 }
 
 /* Style the switch's slider */
-#matugen-switcher slider {
+#matugen-switcher slider,
+#dnd-switch slider {
   background-color: var(--primary);
   border-radius: 16px;
   min-width: 20px;
@@ -244,17 +242,20 @@
 }
 
 /* When the switch is active (checked) */
-#matugen-switcher:checked {
+#matugen-switcher:checked,
+#dnd-switch:checked {
   background-color: var(--primary);
 }
 
 /* Optional: additional styling for the slider when active */
-#matugen-switcher:checked slider {
-  background-color: var(--surface);
+#matugen-switcher:checked slider,
+#dnd-switch:checked slider {
+  background-color: var(--shadow);
 }
 
-#matugen-switcher:checked image {
-  color: var(--surface);
+#matugen-switcher:checked image,
+#dnd-switch:checked image {
+  color: var(--shadow);
 }
 
 #mat-label {
@@ -262,6 +263,63 @@
   margin-left: 4px;
 }
 
+#custom-color-selector-box {
+  background-color: var(--surface);
+  border-radius: 20px;
+  padding: 8px;
+}
+
+#hue-slider {
+  margin: 0 24px;
+}
+
+#hue-slider trough {
+  background-image: linear-gradient(
+    to right,
+    #ff0000,
+    #ffff00,
+    #00ff00,
+    #00ffff,
+    #0000ff,
+    #ff00ff,
+    #ff0000
+  );
+  border-radius: 8px;
+  min-height: 8px;
+}
+
+#hue-slider slider {
+  min-height: 16px;
+  min-width: 8px;
+  margin: -10px 0;
+  background-color: var(--primary);
+  box-shadow: 0 0 4px alpha(var(--shadow), 0.5);
+}
+
+#apply-color-button {
+  background-color: var(--primary);
+  color: var(--shadow);
+  border-radius: 20px;
+  padding: 8px;
+  box-shadow: 0 0 4px alpha(var(--shadow), 0.5);
+}
+
+#apply-color-button:hover {
+  background-color: var(--foreground);
+}
+
+#apply-color-button:active {
+  background-color: var(--shadow);
+}
+
+#apply-color-label {
+  font-size: 16px;
+  color: var(--shadow);
+}
+
+#apply-color-button:active #apply-color-label {
+  color: var(--foreground);
+}
 /*
  * ── emoji ─────────────────────────────────────────────────────────────
 */