From fc3f4b67d65c575daa661ecf31cf59b4ff3cced5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 28 Nov 2022 22:30:26 -0800 Subject: 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 --- scss/_root.scss | 126 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 122 insertions(+), 4 deletions(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index 60e15152f..19cc06696 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -1,4 +1,5 @@ -:root { +:root, +[data-bs-theme="light"] { // Note: Custom variable values only support SassScript inside `#{}`. // Colors @@ -21,6 +22,18 @@ --#{$prefix}#{$color}-rgb: #{$value}; } + @each $color, $value in $theme-colors-text { + --#{$prefix}#{$color}-text: #{$value}; + } + + @each $color, $value in $theme-colors-bg-subtle { + --#{$prefix}#{$color}-bg-subtle: #{$value}; + } + + @each $color, $value in $theme-colors-border-subtle { + --#{$prefix}#{$color}-border-subtle: #{$value}; + } + --#{$prefix}white-rgb: #{to-rgb($white)}; --#{$prefix}black-rgb: #{to-rgb($black)}; --#{$prefix}body-color-rgb: #{to-rgb($body-color)}; @@ -44,12 +57,45 @@ --#{$prefix}body-font-weight: #{$font-weight-base}; --#{$prefix}body-line-height: #{$line-height-base}; --#{$prefix}body-color: #{$body-color}; + + --#{$prefix}emphasis-color: #{$body-emphasis-color}; + --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)}; + + --#{$prefix}secondary-color: #{$body-secondary-color}; + --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)}; + --#{$prefix}secondary-bg: #{$body-secondary-bg}; + --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)}; + + --#{$prefix}tertiary-color: #{$body-tertiary-color}; + --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)}; + --#{$prefix}tertiary-bg: #{$body-tertiary-bg}; + --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)}; + @if $body-text-align != null { --#{$prefix}body-text-align: #{$body-text-align}; } --#{$prefix}body-bg: #{$body-bg}; + --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)}; // scss-docs-end root-body-variables + @if $headings-color != null { + --#{$prefix}heading-color: #{$headings-color}; + } + + --#{$prefix}link-color: #{$link-color}; + --#{$prefix}link-color-rgb: #{to-rgb($link-color)}; + --#{$prefix}link-decoration: #{$link-decoration}; + + --#{$prefix}link-hover-color: #{$link-hover-color}; + --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)}; + + @if $link-hover-decoration != null { + --#{$prefix}link-hover-decoration: #{$link-hover-decoration}; + } + + --#{$prefix}code-color: #{$code-color}; + --#{$prefix}highlight-bg: #{$mark-bg}; + // scss-docs-start root-border-var --#{$prefix}border-width: #{$border-width}; --#{$prefix}border-style: #{$border-style}; @@ -64,10 +110,17 @@ --#{$prefix}border-radius-pill: #{$border-radius-pill}; // scss-docs-end root-border-var - --#{$prefix}link-color: #{$link-color}; - --#{$prefix}link-hover-color: #{$link-hover-color}; + --#{$prefix}box-shadow: #{$box-shadow}; + --#{$prefix}box-shadow-sm: #{$box-shadow-sm}; + --#{$prefix}box-shadow-lg: #{$box-shadow-lg}; + --#{$prefix}box-shadow-inset: #{$box-shadow-inset}; - --#{$prefix}code-color: #{$code-color}; + --#{$prefix}emphasis-color: #{$emphasis-color}; + + // scss-docs-start form-control-vars + --#{$prefix}form-control-bg: var(--#{$prefix}body-bg); + --#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg); + // scss-docs-end form-control-vars --#{$prefix}highlight-bg: #{$mark-bg}; @@ -75,3 +128,68 @@ --#{$prefix}breakpoint-#{$name}: #{$value}; } } + +@if $enable-dark-mode { + @include color-mode(dark) { + // scss-docs-start root-dark-mode-vars + --#{$prefix}body-color: #{$body-color-dark}; + --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)}; + --#{$prefix}body-bg: #{$body-bg-dark}; + --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)}; + + --#{$prefix}emphasis-color: #{$body-emphasis-color-dark}; + --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)}; + + --#{$prefix}secondary-color: #{$body-secondary-color-dark}; + --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)}; + --#{$prefix}secondary-bg: #{$body-secondary-bg-dark}; + --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)}; + + --#{$prefix}tertiary-color: #{$body-tertiary-color-dark}; + --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)}; + --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark}; + --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)}; + + --#{$prefix}emphasis-color: #{$emphasis-color-dark}; + + --#{$prefix}primary-text: #{$primary-text-dark}; + --#{$prefix}secondary-text: #{$secondary-text-dark}; + --#{$prefix}success-text: #{$success-text-dark}; + --#{$prefix}info-text: #{$info-text-dark}; + --#{$prefix}warning-text: #{$warning-text-dark}; + --#{$prefix}danger-text: #{$danger-text-dark}; + --#{$prefix}light-text: #{$light-text-dark}; + --#{$prefix}dark-text: #{$dark-text-dark}; + + --#{$prefix}primary-bg-subtle: #{$primary-bg-subtle-dark}; + --#{$prefix}secondary-bg-subtle: #{$secondary-bg-subtle-dark}; + --#{$prefix}success-bg-subtle: #{$success-bg-subtle-dark}; + --#{$prefix}info-bg-subtle: #{$info-bg-subtle-dark}; + --#{$prefix}warning-bg-subtle: #{$warning-bg-subtle-dark}; + --#{$prefix}danger-bg-subtle: #{$danger-bg-subtle-dark}; + --#{$prefix}light-bg-subtle: #{$light-bg-subtle-dark}; + --#{$prefix}dark-bg-subtle: #{$dark-bg-subtle-dark}; + + --#{$prefix}primary-border-subtle: #{$primary-border-subtle-dark}; + --#{$prefix}secondary-border-subtle: #{$secondary-border-subtle-dark}; + --#{$prefix}success-border-subtle: #{$success-border-subtle-dark}; + --#{$prefix}info-border-subtle: #{$info-border-subtle-dark}; + --#{$prefix}warning-border-subtle: #{$warning-border-subtle-dark}; + --#{$prefix}danger-border-subtle: #{$danger-border-subtle-dark}; + --#{$prefix}light-border-subtle: #{$light-border-subtle-dark}; + --#{$prefix}dark-border-subtle: #{$dark-border-subtle-dark}; + + --#{$prefix}heading-color: #{$headings-color-dark}; + + --#{$prefix}link-color: #{$link-color-dark}; + --#{$prefix}link-hover-color: #{$link-hover-color-dark}; + --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)}; + --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)}; + + --#{$prefix}code-color: #{$code-color-dark}; + + --#{$prefix}border-color: #{$border-color-dark}; + --#{$prefix}border-color-translucent: #{$border-color-translucent-dark}; + // scss-docs-end root-dark-mode-vars + } +} -- cgit v1.2.3