From fc3f4b67d65c575daa661ecf31cf59b4ff3cced5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 28 Nov 2022 22:30:26 -0800 Subject: [PATCH] Add dark mode support (#35857) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- .bundlewatch.config.json | 16 +- scss/_accordion.scss | 9 + scss/_alert.scss | 19 +- scss/_carousel.scss | 14 +- scss/_close.scss | 14 +- scss/_dropdown.scss | 1 + scss/_list-group.scss | 26 +- scss/_maps.scss | 67 ++++ scss/_mixins.scss | 3 +- scss/_navbar.scss | 8 + scss/_pagination.scss | 2 +- scss/_reboot.scss | 6 +- scss/_root.scss | 126 +++++- scss/_utilities.scss | 25 +- scss/_variables-dark.scss | 70 ++++ scss/_variables.scss | 266 ++++++++----- scss/bootstrap-grid.scss | 2 + scss/bootstrap-reboot.scss | 1 + scss/bootstrap-utilities.scss | 1 + scss/bootstrap.scss | 1 + scss/forms/_form-check.scss | 35 +- scss/forms/_form-select.scss | 12 +- scss/mixins/_alert.scss | 2 + scss/mixins/_color-mode.scss | 13 + scss/mixins/_forms.scss | 15 +- scss/mixins/_list-group.scss | 3 + site/assets/js/color-modes/index.js | 62 +++ site/assets/scss/_ads.scss | 6 +- site/assets/scss/_brand.scss | 4 +- site/assets/scss/_buttons.scss | 14 +- site/assets/scss/_callouts.scss | 6 +- site/assets/scss/_clipboard-js.scss | 6 +- site/assets/scss/_component-examples.scss | 44 ++- site/assets/scss/_content.scss | 65 +++- site/assets/scss/_footer.scss | 4 +- site/assets/scss/_masthead.scss | 16 +- site/assets/scss/_navbar.scss | 60 ++- site/assets/scss/_sidebar.scss | 19 +- site/assets/scss/_syntax.scss | 26 +- site/assets/scss/_toc.scss | 13 +- site/assets/scss/_variables.scss | 13 +- site/content/docs/5.2/about/brand.md | 6 +- site/content/docs/5.2/components/accordion.md | 2 +- site/content/docs/5.2/components/alerts.md | 6 + site/content/docs/5.2/components/carousel.md | 4 + .../docs/5.2/components/close-button.md | 14 +- site/content/docs/5.2/components/dropdowns.md | 10 + .../content/docs/5.2/components/list-group.md | 18 +- site/content/docs/5.2/components/modal.md | 2 +- site/content/docs/5.2/components/navbar.md | 72 ++-- site/content/docs/5.2/components/offcanvas.md | 4 +- site/content/docs/5.2/components/scrollspy.md | 8 +- site/content/docs/5.2/components/toasts.md | 18 +- site/content/docs/5.2/content/reboot.md | 33 +- site/content/docs/5.2/content/tables.md | 4 + .../content/docs/5.2/customize/color-modes.md | 273 +++++++++++++ site/content/docs/5.2/customize/color.md | 364 +++++++++++++++++- .../docs/5.2/customize/css-variables.md | 4 + site/content/docs/5.2/customize/options.md | 1 + site/content/docs/5.2/customize/sass.md | 7 +- site/content/docs/5.2/forms/form-control.md | 10 +- .../docs/5.2/getting-started/introduction.md | 2 +- site/content/docs/5.2/helpers/stacks.md | 24 +- .../docs/5.2/helpers/stretched-link.md | 2 +- .../content/docs/5.2/helpers/vertical-rule.md | 6 +- site/content/docs/5.2/layout/columns.md | 23 +- site/content/docs/5.2/layout/gutters.md | 54 +-- site/content/docs/5.2/migration.md | 97 +++++ site/content/docs/5.2/utilities/background.md | 9 +- site/content/docs/5.2/utilities/borders.md | 1 + site/content/docs/5.2/utilities/colors.md | 12 +- site/content/docs/5.2/utilities/overflow.md | 24 +- site/content/docs/5.2/utilities/position.md | 8 +- site/content/docs/5.2/utilities/shadows.md | 10 +- site/content/docs/5.2/utilities/sizing.md | 12 +- site/content/docs/5.2/utilities/spacing.md | 36 +- site/content/docs/5.2/utilities/text.md | 2 +- site/data/sidebar.yml | 1 + site/data/theme-colors.yml | 1 + site/layouts/_default/baseof.html | 2 +- site/layouts/_default/docs.html | 4 +- site/layouts/partials/docs-navbar.html | 47 ++- site/layouts/partials/docs-versions.html | 3 +- site/layouts/partials/footer.html | 8 +- site/layouts/partials/header.html | 3 + site/layouts/partials/home/masthead.html | 2 +- site/layouts/partials/icons.html | 10 + site/layouts/shortcodes/added-in.html | 2 +- .../callout-deprecated-dark-variants.html | 9 + site/layouts/shortcodes/deprecated-in.html | 5 + site/layouts/shortcodes/example.html | 2 +- 91 files changed, 1974 insertions(+), 422 deletions(-) create mode 100644 scss/_variables-dark.scss create mode 100644 scss/mixins/_color-mode.scss create mode 100644 site/assets/js/color-modes/index.js create mode 100644 site/content/docs/5.2/customize/color-modes.md create mode 100644 site/layouts/shortcodes/callout-deprecated-dark-variants.html create mode 100644 site/layouts/shortcodes/deprecated-in.html 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 >}} -