Follow up: custom switches get themes

Author: mdo

scss/_utilities.scss

@@ -897,7 +897,7 @@ $utilities: map.merge(
     // scss-docs-end utils-zindex
     // scss-docs-start utils-check-colors
     "check-color": (
-      property: --#{$prefix}check-checked-bg --#{$prefix}check-checked-border-color --#{$prefix}radio-checked-bg --#{$prefix}radio-checked-border-color,
+      property: --#{$prefix}check-checked-bg --#{$prefix}check-checked-border-color --#{$prefix}radio-checked-bg --#{$prefix}radio-checked-border-color --#{$prefix}switch-checked-bg,
       class: checked,
       values: theme-color-values("bg")
     )

scss/forms/_switch.scss

@@ -21,6 +21,7 @@
     --#{$prefix}switch-border-color: var(--#{$prefix}border-color);
     --#{$prefix}switch-indicator-bg: var(--#{$prefix}white);
     --#{$prefix}switch-checked-bg: var(--#{$prefix}primary-base);
+    --#{$prefix}switch-checked-border-color: var(--#{$prefix}switch-checked-bg);
     --#{$prefix}switch-checked-indicator-bg: var(--#{$prefix}white);
     --#{$prefix}switch-disabled-bg: var(--#{$prefix}secondary-bg);
     --#{$prefix}switch-disabled-indicator-bg: var(--#{$prefix}secondary-text);
@@ -65,7 +66,8 @@
 
     &:has(input:checked) {
       padding-inline-start: calc(var(--#{$prefix}switch-height) / 2 + var(--#{$prefix}switch-padding));
-      background-color: var(--#{$prefix}primary-base);
+      background-color: var(--#{$prefix}switch-checked-bg);
+      border-color: var(--#{$prefix}switch-checked-border-color);
     }
 
     &:has(input:disabled) {

site/src/content/docs/forms/switch.mdx

@@ -4,6 +4,8 @@ description: Custom toggle component built on top of native `<input>` checkbox e
 toc: true
 ---
 
+import { getData } from '@libs/data'
+
 ## Basic switch
 
 Switches are built with checkboxes under the hood, so their HTML closely mirrors that of checkboxes, including optional layout components.
@@ -36,6 +38,17 @@ Consider margin utilities for additional spacing, and flex utilities for alignme
     <label for="switchMdLabel">Default switch</label>
   </b-checkgroup>`} />
 
+## Theme colors
+
+Modify the appearance of checked checkboxes by adding the `.checked-{color}` class to the `.switch` element. This will set the checked background and border color to the theme color.
+
+<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => ` <b-checkgroup>
+    <div class="switch switch-sm mt-1 checked-${themeColor.name}">
+      <input type="checkbox" value="" id="switch${themeColor.name}" switch checked>
+    </div>
+    <label for="switch${themeColor.name}">Example ${themeColor.name} switch</label>
+  </b-checkgroup>`)} />
+
 ## Disabled
 
 Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.