Follow up: custom switches get themes

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index d25c870655b90c2e2cd6aa6246374f08a5968c33..668988f5960e0309e4290c83a6383e9294b15b95 100644 (file)
--- a/scss/_utilities.scss
+++ b/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")
     )

diff --git a/scss/forms/_switch.scss b/scss/forms/_switch.scss
index 457d170a4f38d2da37eeaeb95e8e848788b4cd15..ccb20bc6e4a0c233b00bab0a0c757dd2dff85a21 100644 (file)
--- a/scss/forms/_switch.scss
+++ b/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) {

diff --git a/site/src/content/docs/forms/switch.mdx b/site/src/content/docs/forms/switch.mdx
index c98f424d8cdaf5a088360d1c9e9146b62492a4c8..4112b91b6d2babd07b14ad7e74d7589dc7881009 100644 (file)
--- a/site/src/content/docs/forms/switch.mdx
+++ b/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.