root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 13 Packages Projects Releases Wiki Activity

Follow up: custom switches get themes
BrowserStack / browserstack (push) Has been cancelled Details

This commit is contained in:
Mark Otto 2025-09-29 21:00:42 -07:00
parent dd579b3636
commit aaf730a893
3 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_utilities.scss
View File

@ -897,7 +897,7 @@ $utilities: map.merge(
// scss-docs-end utils-zindex // scss-docs-end utils-zindex
// scss-docs-start utils-check-colors // scss-docs-start utils-check-colors
"check-color": ( "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, class: checked,
values: theme-color-values("bg") values: theme-color-values("bg")
) )

4
scss/forms/_switch.scss
View File

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

13
site/src/content/docs/forms/switch.mdx
View File

@ -4,6 +4,8 @@ description: Custom toggle component built on top of native `<input>` checkbox e
toc: true toc: true
--- ---
import { getData } from '@libs/data'
## Basic switch ## Basic switch
Switches are built with checkboxes under the hood, so their HTML closely mirrors that of checkboxes, including optional layout components. 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> <label for="switchMdLabel">Default switch</label>
</b-checkgroup>`} /> </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 ## 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. 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.