Add Dark Mode Support for Switch Component

src/app/components/switch/switch.scss

@@ -3,6 +3,7 @@
 @use "styles/library" as library;
 
 $off_bg: oklch(0.683 0 0); // #999999
+$off_dark_bg: oklch(0 0 0);
 
 $dimension: (57px, 30px);
 $knob_dimension: (24px, 24px);
@@ -17,15 +18,23 @@ $default_animation_duration: 0.2s;
   display: inline-block;
   width: list.nth($dimension, 1); height: list.nth($dimension, 2);
   border-radius: $border_radius;
+
   background-color: $off_bg;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
   box-shadow: 0 0 0 1px $border_color inset;
 
   --animation-duration: calc(#{$default_animation_duration} * var(--motion-duration-multiplier));
   transition: background-color var(--animation-duration) $animation_timing;
 
+  html.dark-theme & {
+    background-color: $off_dark_bg;
+    box-shadow: 0 0 0 1px oklch(1 0 0 / 40%) inset;
+    transition: background-color var(--animation-duration) $animation_timing, box-shadow var(--animation-duration) $animation_timing;
+  }
+
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+
   &:hover, &:focus-within {
     .switch-knob {
       will-change: transform;
@@ -35,6 +44,11 @@ $default_animation_duration: 0.2s;
   &.active {
     background-color: list.nth(library.$brand_palette, 5);
 
+    html.dark-theme & {
+      background-color: list.nth(library.$brand_palette, 9);
+      box-shadow: 0 0 0 1px list.nth(library.$brand_palette, 10) inset;
+    }
+
     .switch-knob {
       transform: translate(
           list.nth($dimension, 1) - list.nth($knob_dimension, 1) - list.nth($internal_padding, 1) * 2,