mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-02 16:04:07 +03:00
Code Activity

Add dark mode support

Browse Source 
Heavily WIP still, but this begins the process of implementing dark mode for our docs and across the project itself.

- Color modes are toggled in the docs navbar with a custom toggler, which stores the select color mode in local storage.
- Color modes can also be set via data attribute thanks to `data-theme` (with light or dark options available currently).
- Docs are heavily WIP for demonstrating the dark mode.
- In order to best implement color modes, I've spiked out a number of new Sass and CSS variables (e.g., `--bs-secondary-bg` and `--bs-tertiary-bg`). In addition, I've added new global CSS variables like `--bs-border-color` and more. So, in addition to general color modes and theming support, we get greater real-time customization, too.

Todos and open questions:

- [ ] Do we refer to these as themes or color modes?
- [ ] Do we provide a color mode toggler JS plugin?
- [ ] Update all components to better utilize global CSS variables so they can be more easily themed (e.g., see `$dropdown-*` Sass variable changes in the diff).
This commit is contained in:
Mark Otto
2022-02-16 14:55:43 -08:00
parent abba53d4c7
commit b85169ef1c
30 changed files with 467 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/_dropdown.scss
+4 -1
View File
@@ -1,3 +1,5 @@
// stylelint-disable custom-property-empty-line-before
// The dropdown wrapper (`<div>`)
.dropup,
.dropend,
@@ -20,7 +22,7 @@
--#{$variable-prefix}dropdown-padding: #{$dropdown-padding-y $dropdown-padding-x};
--#{$variable-prefix}dropdown-spacer: #{$dropdown-spacer};
@include rfs($dropdown-font-size, --#{$variable-prefix}dropdown-font-size);
--#{$variable-prefix}dropdown-color: #{$dropdown-color}; // stylelint-disable-line custom-property-empty-line-before
--#{$variable-prefix}dropdown-color: #{$dropdown-color};
--#{$variable-prefix}dropdown-bg: #{$dropdown-bg};
--#{$variable-prefix}dropdown-border-color: #{$dropdown-border-color};
--#{$variable-prefix}dropdown-border-radius: #{$dropdown-border-radius};
@@ -165,6 +167,7 @@
white-space: nowrap; // prevent links from randomly breaking onto new lines
background-color: transparent; // For `<button>`s
border: 0; // For `<button>`s
border-radius: var(--#{$variable-prefix}dropdown-item-border-radius, 0); // stylelint-disable-line property-disallowed-list
// Prevent dropdown overflow if there's no padding
// See https://github.com/twbs/bootstrap/pull/27703
scss/_reboot.scss
+4 -4
View File
@@ -87,7 +87,7 @@ hr {
font-style: $headings-font-style;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
color: var(--#{$variable-prefix}heading-color);
}
h1 {
@@ -243,11 +243,11 @@ sup { top: -.5em; }
// Links
a {
color: $link-color;
color: var(--#{$variable-prefix}link-color);
text-decoration: $link-decoration;
&:hover {
color: $link-hover-color;
color: var(--#{$variable-prefix}link-hover-color);
text-decoration: $link-hover-decoration;
}
}
@@ -298,7 +298,7 @@ pre {
code {
@include font-size($code-font-size);
color: $code-color;
color: var(--#{$variable-prefix}code-color);
word-wrap: break-word;
// Streamline the style when inside anchors to avoid broken underline and more
scss/_root.scss
+71 -3
View File
@@ -1,4 +1,7 @@
:root {
// stylelint-disable custom-property-empty-line-before
:root,
[data-theme="light"] {
// Note: Custom variable values only support SassScript inside `#{}`.
// Colors
@@ -35,7 +38,7 @@
--#{$variable-prefix}gradient: #{$gradient};
// Root and body
// stylelint-disable custom-property-empty-line-before
// scss-docs-start root-body-variables
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
@@ -45,10 +48,75 @@
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
// --#{$variable-prefix}body-accent-color: #{$body-accent-color};
// todo: replace body-accent-color with secondary-color
--#{$variable-prefix}secondary-color: #{$body-secondary-color};
--#{$variable-prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$variable-prefix}secondary-bg: #{$body-secondary-bg};
--#{$variable-prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
--#{$variable-prefix}tertiary-color: #{$body-tertiary-color};
--#{$variable-prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$variable-prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$variable-prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
--#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)};
// scss-docs-end root-body-variables
// stylelint-enable custom-property-empty-line-before
--#{$variable-prefix}heading-color: #{$headings-color};
--#{$variable-prefix}link-color: #{$link-color};
--#{$variable-prefix}link-hover-color: #{$link-hover-color};
--#{$variable-prefix}code-color: #{$code-color};
--#{$variable-prefix}border-color: #{$border-color};
--#{$variable-prefix}border-style: #{$border-style};
--#{$variable-prefix}border-width: #{$border-width};
// TODO: move to form components? or make global?
--#{$variable-prefix}form-control-bg: var(--#{$variable-prefix}body-bg);
--#{$variable-prefix}form-control-disabled-bg: var(--#{$variable-prefix}secondary-bg);
}
[data-theme="dark"] {
--#{$variable-prefix}primary: #{$blue-300};
--#{$variable-prefix}success: #{$green-300};
--#{$variable-prefix}danger: #{$red-300};
--#{$variable-prefix}warning: #{$yellow-300};
--#{$variable-prefix}info: #{$cyan-300};
--#{$variable-prefix}primary-rgb: #{to-rgb($blue-300)};
--#{$variable-prefix}success-rgb: #{to-rgb($green-300)};
--#{$variable-prefix}danger-rgb: #{to-rgb($red-300)};
--#{$variable-prefix}warning-rgb: #{to-rgb($yellow-300)};
--#{$variable-prefix}info-rgb: #{to-rgb($cyan-300)};
--#{$variable-prefix}body-color: #{$body-color-dark};
--#{$variable-prefix}body-color-rgb: #{to-rgb($body-color-dark)};
--#{$variable-prefix}body-bg: #{$body-bg-dark};
--#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
--#{$variable-prefix}secondary-color: #{$body-secondary-color-dark};
// --#{$variable-prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
--#{$variable-prefix}secondary-bg: #{$body-secondary-bg-dark};
--#{$variable-prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
--#{$variable-prefix}tertiary-color: #{$body-tertiary-color-dark};
// --#{$variable-prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
--#{$variable-prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$variable-prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
--#{$variable-prefix}heading-color: #{$headings-color-dark};
--#{$variable-prefix}link-color: #{$link-color-dark};
--#{$variable-prefix}link-hover-color: #{$link-hover-color-dark};
--#{$variable-prefix}code-color: #{$code-color-dark};
--#{$variable-prefix}border-color: #{$border-color-dark};
}
scss/_utilities.scss
+10 -6
View File
@@ -99,14 +99,14 @@ $utilities: map-merge(
"border": (
property: border,
values: (
null: $border-width solid $border-color,
null: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color),
0: 0,
)
),
"border-top": (
property: border-top,
values: (
null: $border-width solid $border-color,
null: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color),
0: 0,
)
),
@@ -114,14 +114,14 @@ $utilities: map-merge(
property: border-right,
class: border-end,
values: (
null: $border-width solid $border-color,
null: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color),
0: 0,
)
),
"border-bottom": (
property: border-bottom,
values: (
null: $border-width solid $border-color,
null: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color),
0: 0,
)
),
@@ -129,7 +129,7 @@ $utilities: map-merge(
property: border-left,
class: border-start,
values: (
null: $border-width solid $border-color,
null: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color),
0: 0,
)
),
@@ -523,6 +523,8 @@ $utilities: map-merge(
"muted": $text-muted,
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
"body-secondary": var(--#{$variable-prefix}secondary-color),
"body-tertiary": var(--#{$variable-prefix}tertiary-color),
"reset": inherit,
)
)
@@ -548,7 +550,9 @@ $utilities: map-merge(
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
"transparent": transparent,
"body-secondary": rgba(var(--#{$variable-prefix}secondary-bg-rgb), var(--#{$variable-prefix}bg-opacity)),
"body-tertiary": rgba(var(--#{$variable-prefix}tertiary-bg-rgb), var(--#{$variable-prefix}bg-opacity)),
)
)
),
scss/_variables.scss
+39 -18
View File
@@ -396,9 +396,24 @@ $position-values: (
//
// Settings for the `<body>` element.
$body-bg: $white !default;
$body-color: $gray-900 !default;
$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;
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
// Links
//
@@ -413,6 +428,9 @@ $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.
@@ -483,8 +501,9 @@ $border-widths: (
4: 4px,
5: 5px
) !default;
$border-color: $gray-300 !default;
$border-style: solid !default;
$border-color: rgba($black, .15) !default;
$border-color-dark: rgba($white, .15) !default;
// scss-docs-end border-variables
// scss-docs-start border-radius-variables
@@ -588,6 +607,7 @@ $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
@@ -660,7 +680,7 @@ $table-cell-padding-x-sm: .25rem !default;
$table-cell-vertical-align: top !default;
$table-color: $body-color !default;
$table-color: null !default;
$table-bg: transparent !default;
$table-accent-bg: transparent !default;
@@ -820,12 +840,12 @@ $input-padding-y-lg: $input-btn-padding-y-lg !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-font-size-lg: $input-btn-font-size-lg !default;
$input-bg: $body-bg !default;
$input-disabled-bg: $gray-200 !default;
$input-bg: var(--#{$variable-prefix}form-control-bg) !default;
$input-disabled-bg: var(--#{$variable-prefix}form-control-disabled-bg) !default;
$input-disabled-border-color: null !default;
$input-color: $body-color !default;
$input-border-color: $gray-400 !default;
$input-color: var(--#{$variable-prefix}body-color) !default;
$input-border-color: var(--#{$variable-prefix}border-color) !default; //$gray-400
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: $box-shadow-inset !default;
@@ -869,7 +889,7 @@ $form-check-transition: null !default;
$form-check-input-active-filter: brightness(90%) !default;
$form-check-input-bg: $input-bg !default;
$form-check-input-border: 1px solid rgba($black, .25) !default;
$form-check-input-border: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color) !default;
$form-check-input-border-radius: .25em !default;
$form-check-radio-border-radius: 50% !default;
$form-check-input-focus-border: $input-focus-border-color !default;
@@ -1128,9 +1148,9 @@ $dropdown-padding-x: 0 !default;
$dropdown-padding-y: .5rem !default;
$dropdown-spacer: .125rem !default;
$dropdown-font-size: $font-size-base !default;
$dropdown-color: $body-color !default;
$dropdown-bg: $white !default;
$dropdown-border-color: rgba($black, .15) !default;
$dropdown-color: var(--#{$variable-prefix}body-color) !default;
$dropdown-bg: var(--#{$variable-prefix}body-bg) !default;
$dropdown-border-color: var(--#{$variable-prefix}border-color) !default;
$dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
@@ -1138,9 +1158,9 @@ $dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: $spacer * .5 !default;
$dropdown-box-shadow: $box-shadow !default;
$dropdown-link-color: $gray-900 !default;
$dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default;
$dropdown-link-hover-bg: $gray-200 !default;
$dropdown-link-color: var(--#{$variable-prefix}body-color) !default;
$dropdown-link-hover-color: $dropdown-link-color !default;
$dropdown-link-hover-bg: var(--#{$variable-prefix}tertiary-bg) !default;
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
@@ -1591,8 +1611,8 @@ $offcanvas-transition-duration: .3s !default;
$offcanvas-border-color: $modal-content-border-color !default;
$offcanvas-border-width: $modal-content-border-width !default;
$offcanvas-title-line-height: $modal-title-line-height !default;
$offcanvas-bg-color: $modal-content-bg !default;
$offcanvas-color: $modal-content-color !default;
$offcanvas-bg-color: var(--#{$variable-prefix}body-bg) !default;
$offcanvas-color: var(--#{$variable-prefix}body-color) !default;
$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
@@ -1602,6 +1622,7 @@ $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: .2rem !default;
$kbd-padding-x: .4rem !default;