diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 75588a5adb..a64f7070f6 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -15,11 +15,11 @@ --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y}; --#{$prefix}accordion-btn-color: #{$accordion-button-color}; --#{$prefix}accordion-btn-bg: #{$accordion-button-bg}; - --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)}; + // --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)}; --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width}; --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform}; --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition}; - --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)}; + // --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)}; --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color}; --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow}; --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x}; @@ -148,11 +148,25 @@ } } +@include color-mode() { + --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)}; + --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)}; +} + @if $enable-dark-mode { @include color-mode(dark) { - .accordion-button::after { - --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)}; - --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)}; - } + --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)}; + --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)}; } } + +/* +[data-bs-theme="light"] .accordion +[data-bs-theme="light"].accordion +[data-bs-theme="dark"] .accordion +[data-bs-theme="dark"].accordion + +accordion data-bs-theme="dark" +
+ accordion +*/ diff --git a/scss/_root.scss b/scss/_root.scss index becddf14af..b8210c3013 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -1,5 +1,25 @@ +:root, +[data-bs-theme] { + color: var(--#{$prefix}body-color); + background-color: var(--#{$prefix}body-bg); +} + +// Note that some of these variables could be extracted into `:root` only selector since they are not modified by other color modes! + +/* +:root { + // ... + --#{$prefix}box-shadow: #{$box-shadow}; + --#{$prefix}box-shadow-sm: #{$box-shadow-sm}; + --#{$prefix}box-shadow-lg: #{$box-shadow-lg}; + --#{$prefix}box-shadow-inset: #{$box-shadow-inset}; + // ... +*/ + :root, [data-bs-theme="light"] { + color-scheme: light; + // Note: Custom variable values only support SassScript inside `#{}`. // Colors diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss index 6422b38744..873de64082 100644 --- a/scss/_variables-dark.scss +++ b/scss/_variables-dark.scss @@ -79,8 +79,8 @@ $form-invalid-border-color-dark: $red-300 !default; // Accordion // -$accordion-icon-color-dark: $primary-text-emphasis-dark !default; -$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default; +$accordion-icon-color-dark: $purple !default; +$accordion-icon-active-color-dark: $pink !default; $accordion-button-icon-dark: url("data:image/svg+xml,") !default; $accordion-button-active-icon-dark: url("data:image/svg+xml,") !default; diff --git a/scss/_variables.scss b/scss/_variables.scss index 5429c017e9..0087a1f13a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1365,8 +1365,8 @@ $card-group-margin: $grid-gutter-width * .5 !default; // scss-docs-start accordion-variables $accordion-padding-y: 1rem !default; $accordion-padding-x: 1.25rem !default; -$accordion-color: var(--#{$prefix}body-color) !default; -$accordion-bg: var(--#{$prefix}body-bg) !default; +$accordion-color: null !default; +$accordion-bg: null !default; $accordion-border-width: var(--#{$prefix}border-width) !default; $accordion-border-color: var(--#{$prefix}border-color) !default; $accordion-border-radius: var(--#{$prefix}border-radius) !default; @@ -1387,8 +1387,8 @@ $accordion-button-focus-border-color: $input-focus-border-color !default; $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default; $accordion-icon-width: 1.25rem !default; -$accordion-icon-color: $body-color !default; -$accordion-icon-active-color: $primary-text-emphasis !default; +$accordion-icon-color: $orange !default; +$accordion-icon-active-color: $red !default; $accordion-icon-transition: transform .2s ease-in-out !default; $accordion-icon-transform: rotate(-180deg) !default; diff --git a/scss/mixins/_color-mode.scss b/scss/mixins/_color-mode.scss index 03338b0256..09ef6808e1 100644 --- a/scss/mixins/_color-mode.scss +++ b/scss/mixins/_color-mode.scss @@ -13,8 +13,15 @@ } } } @else { - [data-bs-theme="#{$mode}"] { - @content; + @if $mode == "light" { + :root, + [data-bs-theme="#{$mode}"] { + @content; + } + } @else { + [data-bs-theme="#{$mode}"] { + @content; + } } } } diff --git a/site/content/docs/5.3/examples/dark-mode/index.html b/site/content/docs/5.3/examples/dark-mode/index.html new file mode 100644 index 0000000000..5c7ac672bc --- /dev/null +++ b/site/content/docs/5.3/examples/dark-mode/index.html @@ -0,0 +1,356 @@ +--- +layout: examples +title: Dark Mode Testing +html_class: "h-100" +body_class: "d-flex h-100" +--- + +
+

Default theme of the page

+

Link title

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum sed ratione facilis nisi enim omnis sequi nam nemo vero, perferendis repellendus eos molestiae autem ad harum nihil vel facere quod.

+
+

Forced Light Theme On Container

+

Link title

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum sed ratione facilis nisi enim omnis sequi nam nemo vero, perferendis repellendus eos molestiae autem ad harum nihil vel facere quod.

+
+
+

Forced Dark Theme On Container

+

Link title

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum sed ratione facilis nisi enim omnis sequi nam nemo vero, perferendis repellendus eos molestiae autem ad harum nihil vel facere quod.

+
+
+

Accordions

+

Default

+
+
+

+ +

+
+
+ This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

Forced Light mode On Container

+
+
+
+

+ +

+
+
+ This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+
+

Forced Dark mode On Container

+
+
+
+

+ +

+
+
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+
+

Forced Light mode On Accordion

+
+
+
+

+ +

+
+
+ This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+
+

Forced Dark mode On Accordion

+
+
+
+

+ +

+
+
+ This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+
+
+

Buttons

+

Default

+
+ + + + + + + + + +
+

Forced Light mode On Container

+
+ + + + + + + + + +
+

Forced Dark mode On Container

+
+ + + + + + + + + +
+

Forced Light mode On Buttons

+
+ + + + + + + + + +
+

Forced Dark mode On Buttons

+
+ + + + + + + + + +
+
+

Form validation

+

Default

+
+
+ + +
+ Looks good! +
+
+
+ + +
+ Looks good! +
+
+
+ +
+ @ + +
+ Please choose a username. +
+
+
+
+ + +
+ Please provide a valid city. +
+
+
+ + +
+ Please select a valid state. +
+
+
+ + +
+ Please provide a valid zip. +
+
+
+
+ + +
+ You must agree before submitting. +
+
+
+
+ +
+
+
\ No newline at end of file