mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +03:00
Add dark mode support
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
+39
-18
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user