From: Mark Otto Date: Tue, 29 Nov 2022 06:30:26 +0000 (-0800) Subject: Add dark mode support (#35857) X-Git-Tag: v5.3.0-alpha1~50 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=fc3f4b67d65c575daa661ecf31cf59b4ff3cced5;p=thirdparty%2Fbootstrap.git Add dark mode support (#35857) * Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond * Apply suggestions from code review Co-authored-by: Julien Déramond * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond Co-authored-by: Julien Déramond --- diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index a390442682..49880e1242 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,35 +2,35 @@ "files": [ { "path": "./dist/css/bootstrap-grid.css", - "maxSize": "7.5 kB" + "maxSize": "8.25 kB" }, { "path": "./dist/css/bootstrap-grid.min.css", - "maxSize": "6.75 kB" + "maxSize": "7.5 kB" }, { "path": "./dist/css/bootstrap-reboot.css", - "maxSize": "2.75 kB" + "maxSize": "3.5 kB" }, { "path": "./dist/css/bootstrap-reboot.min.css", - "maxSize": "2.5 kB" + "maxSize": "3.25 kB" }, { "path": "./dist/css/bootstrap-utilities.css", - "maxSize": "9.75 kB" + "maxSize": "10.5 kB" }, { "path": "./dist/css/bootstrap-utilities.min.css", - "maxSize": "9.0 kB" + "maxSize": "9.75 kB" }, { "path": "./dist/css/bootstrap.css", - "maxSize": "30.25 kB" + "maxSize": "31.25 kB" }, { "path": "./dist/css/bootstrap.min.css", - "maxSize": "28 kB" + "maxSize": "29.25 kB" }, { "path": "./dist/js/bootstrap.bundle.js", diff --git a/scss/_accordion.scss b/scss/_accordion.scss index f09601bab6..75588a5adb 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -147,3 +147,12 @@ } } } + +@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)}; + } + } +} diff --git a/scss/_alert.scss b/scss/_alert.scss index c8bc91b420..8647851b17 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -12,6 +12,7 @@ --#{$prefix}alert-border-color: transparent; --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color); --#{$prefix}alert-border-radius: #{$alert-border-radius}; + --#{$prefix}alert-link-color: inherit; // scss-docs-end alert-css-vars position: relative; @@ -32,6 +33,7 @@ // Provide class for links that match alerts .alert-link { font-weight: $alert-link-font-weight; + color: var(--#{$prefix}alert-link-color); } @@ -54,18 +56,13 @@ // scss-docs-start alert-modifiers -// Generate contextual modifier classes for colorizing the alert. - -@each $state, $value in $theme-colors { - $alert-background: shift-color($value, $alert-bg-scale); - $alert-border: shift-color($value, $alert-border-scale); - $alert-color: shift-color($value, $alert-color-scale); - - @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) { - $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale)); - } +// Generate contextual modifier classes for colorizing the alert +@each $state in map-keys($theme-colors) { .alert-#{$state} { - @include alert-variant($alert-background, $alert-border, $alert-color); + --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text); + --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle); + --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle); + --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text); } } // scss-docs-end alert-modifiers diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 858b83634d..ec810f72ad 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -210,7 +210,7 @@ // Dark mode carousel -.carousel-dark { +%carousel-dark { .carousel-control-prev-icon, .carousel-control-next-icon { filter: $carousel-dark-control-icon-filter; @@ -224,3 +224,15 @@ color: $carousel-dark-caption-color; } } + +.carousel-dark { + @extend %carousel-dark; +} + +@if $enable-dark-mode { + @include color-mode(dark) { + .carousel { + @extend %carousel-dark; + } + } +} diff --git a/scss/_close.scss b/scss/_close.scss index 423a944db5..6f814d0af3 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -44,6 +44,18 @@ } } -.btn-close-white { +%btn-close-white { filter: var(--#{$prefix}btn-close-white-filter); } + +.btn-close-white { + @extend %btn-close-white; +} + +@if $enable-dark-mode { + @include color-mode(dark) { + .btn-close { + @extend %btn-close-white; + } + } +} diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 8899d25a0d..587ebb487c 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -184,6 +184,7 @@ white-space: nowrap; // prevent links from randomly breaking onto new lines background-color: transparent; // For ` {{< /example >}} -## White variant +## Dark variant -Change the default `.btn-close` to be white with the `.btn-close-white` class. This class uses the `filter` property to invert the `background-image`. +{{< callout info >}} +**Heads up!** As of v5.3.0, the `.btn-close-white` class is deprecated. Instead, use `data-bs-theme="dark"` to change the color mode of the close button. +{{< /callout >}} + +Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to invert the close button. This uses the `filter` property to invert the `background-image` without overriding its value. {{< example class="bg-dark" >}} - - +
+ + +
{{< /example >}} ## Sass diff --git a/site/content/docs/5.2/components/dropdowns.md b/site/content/docs/5.2/components/dropdowns.md index cd243a792f..b7dae56ab9 100644 --- a/site/content/docs/5.2/components/dropdowns.md +++ b/site/content/docs/5.2/components/dropdowns.md @@ -349,8 +349,12 @@ Button dropdowns work with buttons of all sizes, including default and split dro ## Dark dropdowns +{{< deprecated-in "5.3.0" >}} + Opt into darker dropdowns to match a dark navbar or custom style by adding `.dropdown-menu-dark` onto an existing `.dropdown-menu`. No changes are required to the dropdown items. +{{< callout-deprecated-dark-variants "dropdown-menu" >}} + {{< example >}}
@@ -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 >}} -