mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-24 14:04:09 +03:00
Code Activity

Start component changes

Browse Source
This commit is contained in:
Mark Otto
2022-04-27 17:18:04 -07:00
parent 540686868a
commit 9f6ff84aa5
17 changed files with 222 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/_accordion.scss
+1 -1
View File
@@ -4,7 +4,7 @@
.accordion {
// scss-docs-start accordion-css-vars
--#{$prefix}accordion-color: #{color-contrast($accordion-bg)};
--#{$prefix}accordion-color: #{$accordion-color};
--#{$prefix}accordion-bg: #{$accordion-bg};
--#{$prefix}accordion-transition: #{$accordion-transition};
--#{$prefix}accordion-border-color: #{$accordion-border-color};
scss/_close.scss
+8
View File
@@ -38,3 +38,11 @@
.btn-close-white {
filter: $btn-close-white-filter;
}
@if $enable-dark-mode {
[data-theme="dark"] {
.btn-close {
filter: $btn-close-white-filter;
}
}
}
scss/_root.scss
+20 -10
View File
@@ -88,23 +88,28 @@
--#{$prefix}border-radius-pill: #{$border-radius-pill};
// scss-docs-end root-border-var
--#{$prefix}emphasis-color: #{$emphasis-color};
--#{$prefix}accent-color: #{$accent-color};
--#{$prefix}accent-bg: #{$accent-bg};
--#{$prefix}accent-border: #{$accent-border};
// TODO: move to form components? or make global?
--#{$prefix}form-control-bg: var(--#{$prefix}body-bg);
--#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg);
}
[data-theme="dark"] {
--#{$prefix}primary: #{$blue-300};
--#{$prefix}success: #{$green-300};
--#{$prefix}danger: #{$red-300};
--#{$prefix}warning: #{$yellow-300};
--#{$prefix}info: #{$cyan-300};
// --#{$prefix}primary: #{$blue-300};
// --#{$prefix}success: #{$green-300};
// --#{$prefix}danger: #{$red-300};
// --#{$prefix}warning: #{$yellow-300};
// --#{$prefix}info: #{$cyan-300};
--#{$prefix}primary-rgb: #{to-rgb($blue-300)};
--#{$prefix}success-rgb: #{to-rgb($green-300)};
--#{$prefix}danger-rgb: #{to-rgb($red-300)};
--#{$prefix}warning-rgb: #{to-rgb($yellow-300)};
--#{$prefix}info-rgb: #{to-rgb($cyan-300)};
// --#{$prefix}primary-rgb: #{to-rgb($blue-300)};
// --#{$prefix}success-rgb: #{to-rgb($green-300)};
// --#{$prefix}danger-rgb: #{to-rgb($red-300)};
// --#{$prefix}warning-rgb: #{to-rgb($yellow-300)};
// --#{$prefix}info-rgb: #{to-rgb($cyan-300)};
--#{$prefix}body-color: #{$body-color-dark};
--#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
@@ -121,6 +126,11 @@
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
--#{$prefix}emphasis-color: #{$emphasis-color-dark};
--#{$prefix}accent-color: #{$accent-color-dark};
--#{$prefix}accent-bg: #{$accent-bg-dark};
--#{$prefix}accent-border: #{$accent-border-dark};
--#{$prefix}heading-color: #{$headings-color-dark};
--#{$prefix}link-color: #{$link-color-dark};
scss/_variables-dark.scss
+25
View File
@@ -0,0 +1,25 @@
// Dark color mode variables
//
// Custom variables for the `[data-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
$body-color-dark: $gray-500 !default;
$body-bg-dark: $gray-900 !default;
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
$body-secondary-bg-dark: $gray-800 !default;
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
$emphasis-color-dark: $white !default;
$accent-bg-dark: $blue-300 !default;
$accent-color-dark: color-contrast($accent-bg-dark) !default;
$accent-border-dark: $blue-400 !default;
$border-color-dark: $gray-700 !default;
$headings-color-dark: #fff !default;
$link-color-dark: $blue-300 !default;
$link-hover-color-dark: $blue-200 !default;
$code-color-dark: $pink-300 !default;
$form-select-indicator-color-dark: $body-color-dark !default;
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
$form-switch-color-dark: rgba($white, .25) !default;
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
scss/_variables.scss
+78 -84
View File
@@ -350,6 +350,7 @@ $enable-validation-icons: true !default;
$enable-negative-margins: false !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
$enable-dark-mode: true !default;
// Prefix for :root CSS variables
@@ -402,20 +403,17 @@ $body-text-align: null !default;
$body-color: $gray-900 !default;
$body-bg: $white !default;
$body-color-dark: $gray-500 !default;
$body-bg-dark: $gray-900 !default;
$body-secondary-color: rgba($body-color, .75) !default;
$body-secondary-bg: $gray-200 !default;
$body-tertiary-color: rgba($body-color, .5) !default;
$body-tertiary-bg: $gray-100 !default;
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
$body-secondary-bg-dark: $gray-800 !default;
$emphasis-color: $black !default;
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
$accent-bg: $blue !default;
$accent-color: color-contrast($accent-bg) !default;
$accent-border: $blue-500 !default;
// Links
//
@@ -430,9 +428,6 @@ $link-hover-decoration: null !default;
$stretched-link-pseudo-element: after !default;
$stretched-link-z-index: 1 !default;
$link-color-dark: $blue-300 !default;
$link-hover-color-dark: $blue-200 !default;
// Paragraphs
//
// Style p element.
@@ -504,8 +499,7 @@ $border-widths: (
5: 5px
) !default;
$border-style: solid !default;
$border-color: rgba($black, .15) !default;
$border-color-dark: rgba($white, .15) !default;
$border-color: $gray-300 !default;
// scss-docs-end border-variables
// scss-docs-start border-radius-variables
@@ -609,7 +603,6 @@ $headings-font-style: null !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
$headings-color: null !default;
$headings-color-dark: #fff !default;
// scss-docs-end headings-variables
// scss-docs-start display-headings
@@ -934,7 +927,7 @@ $input-group-addon-padding-y: $input-padding-y !default;
$input-group-addon-padding-x: $input-padding-x !default;
$input-group-addon-font-weight: $input-font-weight !default;
$input-group-addon-color: $input-color !default;
$input-group-addon-bg: $gray-200 !default;
$input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default;
$input-group-addon-border-color: $input-border-color !default;
// scss-docs-end input-group-variables
@@ -949,7 +942,7 @@ $form-select-line-height: $input-line-height !default;
$form-select-color: $input-color !default;
$form-select-bg: $input-bg !default;
$form-select-disabled-color: null !default;
$form-select-disabled-bg: $gray-200 !default;
$form-select-disabled-bg: $input-disabled-bg !default;
$form-select-disabled-border-color: $input-disabled-border-color !default;
$form-select-bg-position: right $form-select-padding-x center !default;
$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
@@ -986,7 +979,7 @@ $form-select-transition: $input-transition !default;
$form-range-track-width: 100% !default;
$form-range-track-height: .5rem !default;
$form-range-track-cursor: pointer !default;
$form-range-track-bg: $gray-300 !default;
$form-range-track-bg: var(--#{$prefix}tertiary-bg) !default;
$form-range-track-border-radius: 1rem !default;
$form-range-track-box-shadow: $box-shadow-inset !default;
@@ -999,14 +992,14 @@ $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !defa
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
$form-range-thumb-disabled-bg: $gray-500 !default;
$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default;
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
// scss-docs-end form-range-variables
// scss-docs-start form-file-variables
$form-file-button-color: $input-color !default;
$form-file-button-bg: $input-group-addon-bg !default;
$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
$form-file-button-bg: var(--#{$prefix}tertiary-bg) !default;
$form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default;
// scss-docs-end form-file-variables
// scss-docs-start form-floating-variables
@@ -1078,19 +1071,19 @@ $nav-link-font-weight: null !default;
$nav-link-color: var(--#{$prefix}link-color) !default;
$nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
$nav-link-disabled-color: $gray-600 !default;
$nav-link-disabled-color: var(--#{$prefix}secondary-color) !default;
$nav-tabs-border-color: $gray-300 !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-border-radius: $border-radius !default;
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
$nav-tabs-link-active-color: $gray-700 !default;
$nav-tabs-link-active-bg: $body-bg !default;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
$nav-tabs-border-width: var(--#{$prefix}border-width) !default;
$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
$nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
$nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default;
$nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default;
$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-link-active-color: $component-active-color !default;
$nav-pills-link-active-bg: $component-active-bg !default;
$nav-pills-link-active-color: var(--#{$prefix}accent-color) !default;
$nav-pills-link-active-bg: var(--#{$prefix}accent-bg) !default;
// scss-docs-end nav-variables
@@ -1125,10 +1118,10 @@ $navbar-dark-disabled-color: rgba($white, .25) !default;
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-dark-toggler-border-color: rgba($white, .1) !default;
$navbar-light-color: rgba($black, .55) !default;
$navbar-light-hover-color: rgba($black, .7) !default;
$navbar-light-active-color: rgba($black, .9) !default;
$navbar-light-disabled-color: rgba($black, .3) !default;
$navbar-light-color: var(--#{$prefix}secondary-color) !default;
$navbar-light-hover-color: var(--#{$prefix}body-color) !default;
$navbar-light-active-color: var(--#{$prefix}emphasis-color) !default;
$navbar-light-disabled-color: var(--#{$prefix}tertiary-color) !default;
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-light-toggler-border-color: rgba($black, .1) !default;
@@ -1208,28 +1201,28 @@ $pagination-padding-x-lg: 1.5rem !default;
$pagination-font-size: $font-size-base !default;
$pagination-color: var(--#{$prefix}link-color) !default;
$pagination-bg: $white !default;
$pagination-border-radius: $border-radius !default;
$pagination-border-width: $border-width !default;
$pagination-bg: var(--#{$prefix}body-bg) !default;
$pagination-border-radius: var(--#{$prefix}border-radius) !default;
$pagination-border-width: var(--#{$prefix}border-width) !default;
$pagination-margin-start: calc($pagination-border-width * -1) !default; // stylelint-disable-line function-disallowed-list
$pagination-border-color: $gray-300 !default;
$pagination-border-color: var(--#{$prefix}border-color) !default;
$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
$pagination-focus-bg: $gray-200 !default;
$pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
$pagination-focus-outline: 0 !default;
$pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
$pagination-hover-bg: $gray-200 !default;
$pagination-hover-border-color: $gray-300 !default;
$pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$pagination-hover-border-color: var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $pagination-active-bg !default;
$pagination-active-color: var(--#{$prefix}accent-color) !default;
$pagination-active-bg: var(--#{$prefix}accent-bg) !default;
$pagination-active-border-color: var(--#{$prefix}accent-bg) !default;
$pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border-color: $gray-300 !default;
$pagination-disabled-color: var(--#{$prefix}secondary-color) !default;
$pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default;
$pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
@@ -1251,18 +1244,18 @@ $placeholder-opacity-min: .2 !default;
$card-spacer-y: $spacer !default;
$card-spacer-x: $spacer !default;
$card-title-spacer-y: $spacer * .5 !default;
$card-border-width: $border-width !default;
$card-border-width: var(--#{$prefix}border-width) !default;
$card-border-color: var(--#{$prefix}border-color) !default;
$card-border-radius: $border-radius !default;
$card-border-radius: var(--#{$prefix}border-radius) !default;
$card-box-shadow: null !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y: $card-spacer-y * .5 !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: rgba($black, .03) !default;
$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
$card-cap-color: null !default;
$card-height: null !default;
$card-color: null !default;
$card-bg: $white !default;
$card-bg: var(--#{$prefix}body-bg) !default;
$card-img-overlay-padding: $spacer !default;
$card-group-margin: $grid-gutter-width * .5 !default;
// scss-docs-end card-variables
@@ -1273,10 +1266,10 @@ $card-group-margin: $grid-gutter-width * .5 !default;
$accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default;
$accordion-color: var(--#{$prefix}body-color) !default;
$accordion-bg: $body-bg !default;
$accordion-border-width: $border-width !default;
$accordion-bg: var(--#{$prefix}body-bg) !default;
$accordion-border-width: var(--#{$prefix}border-width) !default;
$accordion-border-color: var(--#{$prefix}border-color) !default;
$accordion-border-radius: $border-radius !default;
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
$accordion-body-padding-y: $accordion-padding-y !default;
@@ -1308,9 +1301,9 @@ $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w
// scss-docs-start tooltip-variables
$tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default;
$tooltip-color: $white !default;
$tooltip-bg: $black !default;
$tooltip-border-radius: $border-radius !default;
$tooltip-color: var(--#{$prefix}body-bg) !default;
$tooltip-bg: var(--#{$prefix}emphasis-color) !default;
$tooltip-border-radius: var(--#{$prefix}border-radius) !default;
$tooltip-opacity: .9 !default;
$tooltip-padding-y: $spacer * .25 !default;
$tooltip-padding-x: $spacer * .5 !default;
@@ -1338,21 +1331,21 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
// scss-docs-start popover-variables
$popover-font-size: $font-size-sm !default;
$popover-bg: $white !default;
$popover-bg: var(--#{$prefix}body-bg) !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: rgba($black, .2) !default;
$popover-border-radius: $border-radius-lg !default;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
$popover-border-width: var(--#{$prefix}border-width) !default;
$popover-border-color: var(--#{$prefix}border-color) !default;
$popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
$popover-inner-border-radius: calc($popover-border-radius - $popover-border-width) !default; // stylelint-disable-line function-disallowed-list
$popover-box-shadow: $box-shadow !default;
$popover-header-font-size: $font-size-base !default;
$popover-header-bg: shade-color($popover-bg, 6%) !default;
$popover-header-bg: var(--#{$prefix}secondary-bg) !default;
$popover-header-color: var(--#{$prefix}heading-color) !default;
$popover-header-padding-y: .5rem !default;
$popover-header-padding-x: $spacer !default;
$popover-body-color: $body-color !default;
$popover-body-color: var(--#{$prefix}body-color) !default;
$popover-body-padding-y: $spacer !default;
$popover-body-padding-x: $spacer !default;
@@ -1363,7 +1356,7 @@ $popover-arrow-height: .5rem !default;
// fusv-disable
// Deprecated in Bootstrap 5.2.0 for CSS variables
$popover-arrow-color: $popover-bg !default;
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
$popover-arrow-outer-color: var(--#{$prefix}border-color) !default;
// fusv-enable
@@ -1375,16 +1368,16 @@ $toast-padding-x: .75rem !default;
$toast-padding-y: .5rem !default;
$toast-font-size: .875rem !default;
$toast-color: null !default;
$toast-background-color: rgba($white, .85) !default;
$toast-border-width: $border-width !default;
$toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
$toast-border-width: var(--#{$prefix}border-width) !default;
$toast-border-color: var(--#{$prefix}border-color) !default;
$toast-border-radius: $border-radius !default;
$toast-box-shadow: $box-shadow !default;
$toast-border-radius: var(--#{$prefix}border-radius) !default;
$toast-box-shadow: var(--#{$prefix}box-shadow) !default;
$toast-spacing: $container-padding-x !default;
$toast-header-color: $gray-600 !default;
$toast-header-background-color: rgba($white, .85) !default;
$toast-header-border-color: rgba($black, .05) !default;
$toast-header-color: var(--#{$prefix}secondary-color) !default;
$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
$toast-header-border-color: $toast-border-color !default;
// scss-docs-end toast-variables
@@ -1413,10 +1406,10 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default;
$modal-title-line-height: $line-height-base !default;
$modal-content-color: null !default;
$modal-content-bg: $white !default;
$modal-content-bg: var(--#{$prefix}body-bg) !default;
$modal-content-border-color: var(--#{$prefix}border-color) !default;
$modal-content-border-width: $border-width !default;
$modal-content-border-radius: $border-radius-lg !default;
$modal-content-border-width: var(--#{$prefix}border-width) !default;
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs: $box-shadow-sm !default;
$modal-content-box-shadow-sm-up: $box-shadow !default;
@@ -1469,9 +1462,9 @@ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers widt
// scss-docs-start progress-variables
$progress-height: 1rem !default;
$progress-font-size: $font-size-base * .75 !default;
$progress-bg: $gray-200 !default;
$progress-border-radius: $border-radius !default;
$progress-box-shadow: $box-shadow-inset !default;
$progress-bg: var(--#{$prefix}secondary-bg) !default;
$progress-border-radius: var(--#{$prefix}border-radius) !default;
$progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$progress-bar-color: $white !default;
$progress-bar-bg: $primary !default;
$progress-bar-animation-timing: 1s linear infinite !default;
@@ -1482,9 +1475,9 @@ $progress-bar-transition: width .6s ease !default;
// List group
// scss-docs-start list-group-variables
$list-group-color: $gray-900 !default;
$list-group-bg: $white !default;
$list-group-border-color: rgba($black, .125) !default;
$list-group-color: var(--#{$prefix}body-color) !default;
$list-group-bg: var(--#{$prefix}body-bg) !default;
$list-group-border-color: var(--#{$prefix}border-color) !default;
$list-group-border-width: $border-width !default;
$list-group-border-radius: $border-radius !default;
@@ -1493,18 +1486,18 @@ $list-group-item-padding-x: $spacer !default;
$list-group-item-bg-scale: -80% !default;
$list-group-item-color-scale: 40% !default;
$list-group-hover-bg: $gray-100 !default;
$list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border-color: $list-group-active-bg !default;
$list-group-disabled-color: $gray-600 !default;
$list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
$list-group-disabled-bg: $list-group-bg !default;
$list-group-action-color: $gray-700 !default;
$list-group-action-hover-color: $list-group-action-color !default;
$list-group-action-active-color: $body-color !default;
$list-group-action-active-color: var(--#{$prefix}body-color) !default;
$list-group-action-active-bg: $gray-200 !default;
// scss-docs-end list-group-variables
@@ -1637,7 +1630,6 @@ $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
$code-font-size: $small-font-size !default;
$code-color: $pink !default;
$code-color-dark: $pink-300 !default;
$kbd-padding-y: .1875rem !default;
$kbd-padding-x: .375rem !default;
@@ -1647,3 +1639,5 @@ $kbd-bg: var(--#{$prefix}body-color) !default;
$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
$pre-color: null !default;
@import "variables-dark";
scss/forms/_form-check.scss
+9
View File
@@ -173,3 +173,12 @@
}
}
}
@if $enable-dark-mode {
[data-theme="dark"] {
// Use `:not()` to keep from having to override subsequent embedded SVGs
.form-switch .form-check-input:not(:checked):not(:focus) {
background-image: escape-svg($form-switch-bg-image-dark);
}
}
}
scss/forms/_form-select.scss
+8
View File
@@ -69,3 +69,11 @@
@include font-size($form-select-font-size-lg);
@include border-radius($form-select-border-radius-lg);
}
@if $enable-dark-mode {
[data-theme="dark"] {
.form-select {
background-image: escape-svg($form-select-indicator-dark);
}
}
}
site/assets/scss/_component-examples.scss
+2 -2
View File
@@ -3,7 +3,7 @@
//
.bd-example-snippet {
border: solid $border-color;
border: solid var(--bs-border-color);
border-width: 1px 0;
@include media-breakpoint-up(md) {
@@ -17,7 +17,7 @@
position: relative;
padding: var(--bd-example-padding);
margin: 0 ($bd-gutter-x * -.5);
border: solid $border-color;
border: solid var(--bs-border-color);
border-width: 1px 0;
@include clearfix();
site/assets/scss/_content.scss
+1 -1
View File
@@ -126,7 +126,7 @@
.border-lg-start {
@include media-breakpoint-up(lg) {
border-left: $border-width solid $border-color;
border-left: var(--bs-border-width) solid var(--bs-border-color);
}
}
site/assets/scss/_masthead.scss
+10 -1
View File
@@ -75,10 +75,19 @@
mix-blend-mode: darken;
svg {
filter: drop-shadow(0 1px 1px #fff);
filter: drop-shadow(0 1px 1px var(--bs-body-bg));
}
}
@if $enable-dark-mode {
[data-theme="dark"] {
.masthead-followup-icon {
mix-blend-mode: lighten;
}
}
}
.masthead-followup-svg {
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .125));
}
site/assets/scss/_navbar.scss
+2 -1
View File
@@ -76,7 +76,8 @@
.dropdown-menu {
--bs-dropdown-min-width: 12rem;
--bs-dropdown-padding: .25rem;
--bs-dropdown-padding-x: .25rem;
--bs-dropdown-padding-y: .25rem;
--bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
--bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
@include font-size(.875rem);
site/content/docs/5.1/components/accordion.md
+1 -1
View File
@@ -66,7 +66,7 @@ Click the accordions below to expand/collapse the accordion content.
Add `.accordion-flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
{{< example class="bg-light" >}}
{{< example class="bg-body-secondary" >}}
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
site/content/docs/5.1/components/modal.md
+1 -1
View File
@@ -38,7 +38,7 @@ Keep reading for demos and usage guidelines.
Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
<div class="bd-example bg-light">
<div class="bd-example bg-body-secondary">
<div class="modal position-static d-block" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
site/content/docs/5.1/components/navbar.md
+29 -29
View File
@@ -37,7 +37,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from
Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -75,7 +75,7 @@ Here's an example of all the sub-components included in a responsive light-theme
</nav>
{{< /example >}}
This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes.
This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-body-tertiary`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes.
### Brand
@@ -87,14 +87,14 @@ Add your text within an element with the `.navbar-brand` class.
{{< example >}}
<!-- As a link -->
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- As a heading -->
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
@@ -106,7 +106,7 @@ Add your text within an element with the `.navbar-brand` class.
You can replace the text within the `.navbar-brand` with an `<img>`.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
@@ -120,7 +120,7 @@ You can replace the text within the `.navbar-brand` with an `<img>`.
You can also make use of some additional utilities to add an image and text at the same time. Note the addition of `.d-inline-block` and `.align-text-top` on the `<img>`.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
@@ -139,7 +139,7 @@ Add the `.active` class on `.nav-link` to indicate the current page.
Please note that you should also add the `aria-current` attribute on the active `.nav-link`.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -168,7 +168,7 @@ Please note that you should also add the `aria-current` attribute on the active
And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
@@ -189,7 +189,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
@@ -227,7 +227,7 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele
Place various form controls and components within a navbar:
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
@@ -240,7 +240,7 @@ Place various form controls and components within a navbar:
Immediate child elements of `.navbar` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex" role="search">
@@ -254,7 +254,7 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi
Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<form>` element as the container and save some HTML.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<form class="container-fluid">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
@@ -267,7 +267,7 @@ Input groups work, too. If your navbar is an entire form, or mostly a form, you
Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<form class="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
@@ -280,7 +280,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a
Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
@@ -292,7 +292,7 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj
Mix and match with other components and utilities as needed.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
@@ -385,7 +385,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
</div>
</nav>
<nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;">
<nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;" data-theme="light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
@@ -435,7 +435,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
{{< example >}}
<div class="container">
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
@@ -446,7 +446,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
Use any of the responsive containers to change how wide the content in your navbar is presented.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
@@ -460,7 +460,7 @@ Use our [position utilities]({{< docsref "/utilities/position" >}}) to place nav
Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Default</a>
</div>
@@ -468,7 +468,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
{{< /example >}}
{{< example >}}
<nav class="navbar fixed-top bg-light">
<nav class="navbar fixed-top bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
@@ -476,7 +476,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
{{< /example >}}
{{< example >}}
<nav class="navbar fixed-bottom bg-light">
<nav class="navbar fixed-bottom bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
@@ -484,7 +484,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
{{< /example >}}
{{< example >}}
<nav class="navbar sticky-top bg-light">
<nav class="navbar sticky-top bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
@@ -492,7 +492,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
{{< /example >}}
{{< example >}}
<nav class="navbar sticky-bottom bg-light">
<nav class="navbar sticky-bottom bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky bottom</a>
</div>
@@ -508,7 +508,7 @@ Please note that this behavior comes with a potential drawback of `overflow`—w
Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-height: 100px;"`, with some extra margin utilities for optimum spacing.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
@@ -559,7 +559,7 @@ Navbar togglers are left-aligned by default, but should they follow a sibling el
With no `.navbar-brand` shown at the smallest breakpoint:
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@@ -589,7 +589,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
With a brand name shown on the left and toggler on the right:
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
@@ -619,7 +619,7 @@ With a brand name shown on the left and toggler on the right:
With a toggler on the left and brand name on the right:
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@@ -675,7 +675,7 @@ Transform your expanding and collapsing navbar into an offcanvas drawer with the
In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `.navbar-expand-*` class entirely.
{{< example >}}
<nav class="navbar bg-light fixed-top">
<nav class="navbar bg-body-tertiary fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
@@ -721,7 +721,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `lg`, use `.navbar-expand-lg`.
```html
<nav class="navbar navbar-expand-lg bg-light fixed-top">
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
<span class="navbar-toggler-icon"></span>
site/content/docs/5.1/components/offcanvas.md
+1 -1
View File
@@ -27,7 +27,7 @@ Offcanvas is a sidebar component that can be toggled via JavaScript to appear fr
Below is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.
{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
{{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}}
<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
site/content/docs/5.1/components/toasts.md
+9 -9
View File
@@ -27,7 +27,7 @@ To encourage extensible and predictable toasts, we recommend a header and body.
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
{{< example class="bg-light" >}}
{{< example >}}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
@@ -121,7 +121,7 @@ Toasts are slightly translucent to blend in with what's below them.
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
{{< example class="bg-light" >}}
{{< example >}}
<div class="toast-container position-static">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
@@ -153,7 +153,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
Customize your toasts by removing sub-components, tweaking them with [utilities]({{< docsref "/utilities/api" >}}), or by adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons]({{< param icons >}}), and using some [flexbox utilities]({{< docsref "/utilities/flex" >}}) to adjust the layout.
{{< example class="bg-light" >}}
{{< example >}}
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
@@ -166,7 +166,7 @@ Customize your toasts by removing sub-components, tweaking them with [utilities]
Alternatively, you can also add additional controls and components to toasts.
{{< example class="bg-light" >}}
{{< example >}}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
@@ -182,7 +182,7 @@ Alternatively, you can also add additional controls and components to toasts.
Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.bg-primary` and `.text-white` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
{{< example class="bg-light" >}}
{{< example >}}
<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
@@ -215,7 +215,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n
</select>
</div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
<div aria-live="polite" aria-atomic="true" class="bg-body-secondary position-relative bd-example-toasts rounded-3">
<div class="toast-container p-3" id="toastPlacement">
<div class="toast">
<div class="toast-header">
@@ -233,7 +233,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n
For systems that generate more notifications, consider using a wrapping element so they can easily stack.
{{< example class="bg-dark bd-example-toasts p-0" >}}
{{< example class="bd-example-toasts p-0" >}}
<div aria-live="polite" aria-atomic="true" class="position-relative">
<!-- Position it: -->
<!-- - `.toast-container` for spacing between toasts -->
@@ -271,7 +271,7 @@ For systems that generate more notifications, consider using a wrapping element
You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
{{< example class="bg-dark bd-example-toasts d-flex" >}}
{{< example class="bd-example-toasts d-flex" >}}
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
@@ -308,7 +308,7 @@ As the content you're displaying changes, be sure to update the [`delay` timeout
When using `autohide: false`, you must add a close button to allow users to dismiss the toast.
{{< example class="bg-light" >}}
{{< example >}}
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
site/content/docs/5.1/customize/color.md
+17 -13
View File
@@ -6,11 +6,13 @@ group: customize
toc: true
---
## Dark mode
## Color modes
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.3.0</small>
{{< added-in "5.3.0" >}}
**Bootstrap now supports dark mode!** After upgrading to v5.3.0, you'll be able to implement your own color mode toggler (see below for an example from Bootstrap's docs) and apply the different color modes as you see fit. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to an easy `data-theme` attribute.
### Dark mode
**Bootstrap now supports color modes, starting with dark mode!** After upgrading to v5.3.0, you'll be able to implement your own color mode toggler (see below for an example from Bootstrap's docs) and apply the different color modes as you see fit. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to the `data-theme` attribute.
For example, to change the toggle mode of a dropdown menu, add `data-theme="light"` or `data-theme="dark"` to the parent `.dropdown`. Now, no matter the global color mode, these dropdowns will display as intended.
@@ -44,11 +46,11 @@ For example, to change the toggle mode of a dropdown menu, add `data-theme="ligh
</div>
{{< /example >}}
## Custom color modes
### Custom color modes
While the primary use case for color modes is light and dark mode, custom color modes can easily be added. Create your own `data-theme` selector with a custom value as the name of your color mode, then modify the CSS variables as needed.
While the primary use case for color modes is light and dark mode, custom color modes are also possible. Create your own `data-theme` selector with a custom value as the name of your color mode, then modify our CSS variables as needed.
For example, you can create a blue theme with the selector `data-theme="blue"`.
For example, you can create a "blue theme" with the selector `data-theme="blue"`.
{{< scss-docs name="custom-color-mode" file="site/assets/scss/_content.scss" >}}
@@ -79,16 +81,18 @@ For example, you can create a blue theme with the selector `data-theme="blue"`.
</div>
```
## New theme colors
## Colors
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
### New theme colors
Bootstrap's color palette has continued to expand and become more nuanced in v5.2.0 with the addition of new `secondary` and `tertiary` colors. Our new colors are available through Sass and CSS variables (but not our color maps), with the express goal of making it easier to customize across multiple colors modes like light and dark.
{{< added-in "5.3.0" >}}
Bootstrap's color palette has continued to expand and become more nuanced in v5.3.0 with the addition of new `secondary` and `tertiary` text and background colors. Our new colors are available through Sass and CSS variables (but not our color maps) with the express goal of making it easier to customize across multiple colors modes like light and dark.
Colors ending in `--rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
{{< callout warning>}}
**Heads up!** There's some potentially confusing things regarding new secondary and tertiary colors, and our secondary theme color.
**Heads up!** There's some potentially confusing things regarding new secondary and tertiary colors, and our secondary theme color. Expect this to be ironed out in v6.
{{< /callout >}}
{{< bs-table "table text-start table-swatches" >}}
@@ -105,7 +109,7 @@ Colors ending in `--rgb` provide the `red, green, blue` values for use in `rgb()
| **Info —** Theme color used for neutral and informative content. | <div class="p-3 text-body rounded-2" style="background-color: var(--bs-info);">Info</div> | `--bs-info`<br>`--bs-info-rgb` |
{{< /bs-table >}}
## Theme colors
### Theme colors
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap's `scss/_variables.scss` file.
@@ -113,7 +117,7 @@ We use a subset of all colors to create a smaller color palette for generating c
{{< theme-colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="col-md-4">
<div class="p-3 mb-3 bg-{{ .name }} {{ if .contrast_color }}text-{{ .contrast_color }}{{ else }}text-white{{ end }}">{{ .name | title }}</div>
<div class="p-3 mb-3 text-bg-{{ .name }} rounded-3">{{ .name | title }}</div>
</div>
{{ end -}}
{{< /theme-colors.inline >}}
@@ -125,7 +129,7 @@ All these colors are available as a Sass map, `$theme-colors`.
Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors.
## All colors
### All colors
All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).