Skip to content

Commit fc3f4b6

Browse files
mdojulien-deramond
mdo
and
julien-deramond
authored
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 <[email protected]> * 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 <[email protected]> * Apply suggestions from code review Co-authored-by: Julien Déramond <[email protected]> * 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 <[email protected]> Co-authored-by: Julien Déramond <[email protected]>
1 parent a1a9895 commit fc3f4b6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

91 files changed

+1973
-421
lines changed

‎.bundlewatch.config.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,35 @@
22
"files": [
33
{
44
"path": "./dist/css/bootstrap-grid.css",
5-
"maxSize": "7.5 kB"
5+
"maxSize": "8.25 kB"
66
},
77
{
88
"path": "./dist/css/bootstrap-grid.min.css",
9-
"maxSize": "6.75 kB"
9+
"maxSize": "7.5 kB"
1010
},
1111
{
1212
"path": "./dist/css/bootstrap-reboot.css",
13-
"maxSize": "2.75 kB"
13+
"maxSize": "3.5 kB"
1414
},
1515
{
1616
"path": "./dist/css/bootstrap-reboot.min.css",
17-
"maxSize": "2.5 kB"
17+
"maxSize": "3.25 kB"
1818
},
1919
{
2020
"path": "./dist/css/bootstrap-utilities.css",
21-
"maxSize": "9.75 kB"
21+
"maxSize": "10.5 kB"
2222
},
2323
{
2424
"path": "./dist/css/bootstrap-utilities.min.css",
25-
"maxSize": "9.0 kB"
25+
"maxSize": "9.75 kB"
2626
},
2727
{
2828
"path": "./dist/css/bootstrap.css",
29-
"maxSize": "30.25 kB"
29+
"maxSize": "31.25 kB"
3030
},
3131
{
3232
"path": "./dist/css/bootstrap.min.css",
33-
"maxSize": "28 kB"
33+
"maxSize": "29.25 kB"
3434
},
3535
{
3636
"path": "./dist/js/bootstrap.bundle.js",

‎scss/_accordion.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,3 +147,12 @@
147147
}
148148
}
149149
}
150+
151+
@if $enable-dark-mode {
152+
@include color-mode(dark) {
153+
.accordion-button::after {
154+
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
155+
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
156+
}
157+
}
158+
}

‎scss/_alert.scss

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
--#{$prefix}alert-border-color: transparent;
1313
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
1414
--#{$prefix}alert-border-radius: #{$alert-border-radius};
15+
--#{$prefix}alert-link-color: inherit;
1516
// scss-docs-end alert-css-vars
1617

1718
position: relative;
@@ -32,6 +33,7 @@
3233
// Provide class for links that match alerts
3334
.alert-link {
3435
font-weight: $alert-link-font-weight;
36+
color: var(--#{$prefix}alert-link-color);
3537
}
3638

3739

@@ -54,18 +56,13 @@
5456

5557

5658
// scss-docs-start alert-modifiers
57-
// Generate contextual modifier classes for colorizing the alert.
58-
59-
@each $state, $value in $theme-colors {
60-
$alert-background: shift-color($value, $alert-bg-scale);
61-
$alert-border: shift-color($value, $alert-border-scale);
62-
$alert-color: shift-color($value, $alert-color-scale);
63-
64-
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
65-
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
66-
}
59+
// Generate contextual modifier classes for colorizing the alert
60+
@each $state in map-keys($theme-colors) {
6761
.alert-#{$state} {
68-
@include alert-variant($alert-background, $alert-border, $alert-color);
62+
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text);
63+
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
64+
--#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
65+
--#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text);
6966
}
7067
}
7168
// scss-docs-end alert-modifiers

‎scss/_carousel.scss

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@
210210

211211
// Dark mode carousel
212212

213-
.carousel-dark {
213+
%carousel-dark {
214214
.carousel-control-prev-icon,
215215
.carousel-control-next-icon {
216216
filter: $carousel-dark-control-icon-filter;
@@ -224,3 +224,15 @@
224224
color: $carousel-dark-caption-color;
225225
}
226226
}
227+
228+
.carousel-dark {
229+
@extend %carousel-dark;
230+
}
231+
232+
@if $enable-dark-mode {
233+
@include color-mode(dark) {
234+
.carousel {
235+
@extend %carousel-dark;
236+
}
237+
}
238+
}

‎scss/_close.scss

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,18 @@
4444
}
4545
}
4646

47-
.btn-close-white {
47+
%btn-close-white {
4848
filter: var(--#{$prefix}btn-close-white-filter);
4949
}
50+
51+
.btn-close-white {
52+
@extend %btn-close-white;
53+
}
54+
55+
@if $enable-dark-mode {
56+
@include color-mode(dark) {
57+
.btn-close {
58+
@extend %btn-close-white;
59+
}
60+
}
61+
}

‎scss/_dropdown.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,7 @@
184184
white-space: nowrap; // prevent links from randomly breaking onto new lines
185185
background-color: transparent; // For `<button>`s
186186
border: 0; // For `<button>`s
187+
@include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
187188

188189
&:hover,
189190
&:focus {

‎scss/_list-group.scss

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -180,13 +180,25 @@
180180
// Add modifier classes to change text and background color on individual items.
181181
// Organizationally, this must come after the `:hover` states.
182182

183-
@each $state, $value in $theme-colors {
184-
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
185-
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
186-
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
187-
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
188-
}
183+
@each $state in map-keys($theme-colors) {
184+
.list-group-item-#{$state} {
185+
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text);
186+
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
187+
--#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
188+
189+
&.list-group-item-action {
190+
&:hover,
191+
&:focus {
192+
--#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
193+
--#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
194+
}
189195

190-
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
196+
&:active {
197+
--#{$prefix}list-group-active-color: var(--#{$prefix}emphasis-color);
198+
--#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text);
199+
--#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text);
200+
}
201+
}
202+
}
191203
}
192204
// scss-docs-end list-group-modifiers

‎scss/_maps.scss

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,39 @@
66
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
77
// scss-docs-end theme-colors-rgb
88

9+
$theme-colors-text: (
10+
"primary": $primary-text,
11+
"secondary": $secondary-text,
12+
"success": $success-text,
13+
"info": $info-text,
14+
"warning": $warning-text,
15+
"danger": $danger-text,
16+
"light": $light-text,
17+
"dark": $dark-text,
18+
) !default;
19+
20+
$theme-colors-bg-subtle: (
21+
"primary": $primary-bg-subtle,
22+
"secondary": $secondary-bg-subtle,
23+
"success": $success-bg-subtle,
24+
"info": $info-bg-subtle,
25+
"warning": $warning-bg-subtle,
26+
"danger": $danger-bg-subtle,
27+
"light": $light-bg-subtle,
28+
"dark": $dark-bg-subtle,
29+
) !default;
30+
31+
$theme-colors-border-subtle: (
32+
"primary": $primary-border-subtle,
33+
"secondary": $secondary-border-subtle,
34+
"success": $success-border-subtle,
35+
"info": $info-border-subtle,
36+
"warning": $warning-border-subtle,
37+
"danger": $danger-border-subtle,
38+
"light": $light-border-subtle,
39+
"dark": $dark-border-subtle,
40+
) !default;
41+
942
// Utilities maps
1043
//
1144
// Extends the default `$theme-colors` maps to help create our utilities.
@@ -25,6 +58,17 @@ $utilities-text: map-merge(
2558
)
2659
) !default;
2760
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
61+
62+
$utilities-text-emphasis-colors: (
63+
"primary-emphasis": var(--#{$prefix}primary-text),
64+
"secondary-emphasis": var(--#{$prefix}secondary-text),
65+
"success-emphasis": var(--#{$prefix}success-text),
66+
"info-emphasis": var(--#{$prefix}info-text),
67+
"warning-emphasis": var(--#{$prefix}warning-text),
68+
"danger-emphasis": var(--#{$prefix}danger-text),
69+
"light-emphasis": var(--#{$prefix}light-text),
70+
"dark-emphasis": var(--#{$prefix}dark-text)
71+
) !default;
2872
// scss-docs-end utilities-text-colors
2973

3074
// scss-docs-start utilities-bg-colors
@@ -37,6 +81,18 @@ $utilities-bg: map-merge(
3781
)
3882
) !default;
3983
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
84+
85+
$utilities-bg-subtle: (
86+
"primary-subtle": var(--#{$prefix}primary-bg-subtle),
87+
"secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
88+
"success-subtle": var(--#{$prefix}success-bg-subtle),
89+
"info-subtle": var(--#{$prefix}info-bg-subtle),
90+
"warning-subtle": var(--#{$prefix}warning-bg-subtle),
91+
"danger-subtle": var(--#{$prefix}danger-bg-subtle),
92+
"light-subtle": var(--#{$prefix}light-bg-subtle),
93+
"dark-subtle": var(--#{$prefix}dark-bg-subtle)
94+
) !default;
95+
// $utilities-bg-subtle-colors: map-loop($utilities-bg-subtle, rgba-css-var, "$key", "bg") !default;
4096
// scss-docs-end utilities-bg-colors
4197

4298
// scss-docs-start utilities-border-colors
@@ -47,6 +103,17 @@ $utilities-border: map-merge(
47103
)
48104
) !default;
49105
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
106+
107+
$utilities-border-subtle: (
108+
"primary-subtle": var(--#{$prefix}primary-border-subtle),
109+
"secondary-subtle": var(--#{$prefix}secondary-border-subtle),
110+
"success-subtle": var(--#{$prefix}success-border-subtle),
111+
"info-subtle": var(--#{$prefix}info-border-subtle),
112+
"warning-subtle": var(--#{$prefix}warning-border-subtle),
113+
"danger-subtle": var(--#{$prefix}danger-border-subtle),
114+
"light-subtle": var(--#{$prefix}light-border-subtle),
115+
"dark-subtle": var(--#{$prefix}dark-border-subtle)
116+
) !default;
50117
// scss-docs-end utilities-border-colors
51118

52119
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;

‎scss/_mixins.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
// Helpers
1212
@import "mixins/breakpoints";
13+
@import "mixins/color-mode";
1314
@import "mixins/color-scheme";
1415
@import "mixins/image";
1516
@import "mixins/resize";
@@ -21,13 +22,11 @@
2122
@import "mixins/utilities";
2223

2324
// Components
24-
@import "mixins/alert";
2525
@import "mixins/backdrop";
2626
@import "mixins/buttons";
2727
@import "mixins/caret";
2828
@import "mixins/pagination";
2929
@import "mixins/lists";
30-
@import "mixins/list-group";
3130
@import "mixins/forms";
3231
@import "mixins/table-variants";
3332

‎scss/_navbar.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -276,3 +276,11 @@
276276
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
277277
// scss-docs-end navbar-dark-css-vars
278278
}
279+
280+
@if $enable-dark-mode {
281+
@include color-mode(dark) {
282+
.navbar {
283+
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
284+
}
285+
}
286+
}

‎scss/_pagination.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
margin-left: $pagination-margin-start;
7676
}
7777

78-
@if $pagination-margin-start == ($pagination-border-width * -1) {
78+
@if $pagination-margin-start == calc($pagination-border-width * -1) {
7979
&:first-child {
8080
.page-link {
8181
@include border-start-radius(var(--#{$prefix}pagination-border-radius));

‎scss/_reboot.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ hr {
8787
font-style: $headings-font-style;
8888
font-weight: $headings-font-weight;
8989
line-height: $headings-line-height;
90-
color: $headings-color;
90+
color: var(--#{$prefix}heading-color, inherit);
9191
}
9292

9393
h1 {
@@ -241,11 +241,11 @@ sup { top: -.5em; }
241241
// Links
242242

243243
a {
244-
color: var(--#{$prefix}link-color);
244+
color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
245245
text-decoration: $link-decoration;
246246

247247
&:hover {
248-
color: var(--#{$prefix}link-hover-color);
248+
--#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
249249
text-decoration: $link-hover-decoration;
250250
}
251251
}

0 commit comments

Comments
 (0)