GTK4: Customize switches

src/themes/Kali/sass/gtk4/_common-tweaks.scss

@@ -46,6 +46,56 @@ headerbar entry {
   background: $base_color;
 }
 
+/**********
+ * Switch *
+ **********/
+switch {
+  box-shadow: $_widget_inset_shadow;
+
+  slider { @extend %slider; }
+
+  &:hover slider { @extend %slider_active; }
+
+  &:checked {
+    border-right-width: 0; // Hack to prevent dirty right border-radius
+    margin-right: 1px; // Compensate missing right border
+    box-shadow: inset 0 1px 3px -1px transparentize(black, .4);
+
+    &, &:backdrop { border-color: transparentize(black, .8); }
+
+    slider {
+      border-color: if($variant=='light', $suggested_border_color, $borders_color);
+      &:backdrop:not(:disabled) {
+        border-color: if($variant=='light', $suggested_bg_color, $backdrop_borders_color);
+      }
+    }
+  }
+
+  &:backdrop, &:disabled {
+    box-shadow: none;
+    border-color: $backdrop_borders_color;
+
+    slider { border-color: $backdrop_borders_color; }
+  }
+}
+
+/************
+ * GtkScale *
+ ************/
+%slider,
+scale slider {
+  @include button(normal);
+
+  border-color: darken($alt_borders_color, 3%);
+  @at-root %slider_active,
+  &:active {
+    background-image: if($variant == 'light', image(lighten($bg_color, 14%)), image(darken($bg_color, 9%)));
+    border-color: $suggested_bg_color;
+  }
+
+  &:disabled { border-color: $backdrop_borders_color; }
+}
+
 /***************
  * Header bars *
  ***************/