diff --git a/scss/_maps.scss b/scss/_maps.scss index 2e299488fa..db25773e59 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -44,6 +44,7 @@ $theme-colors-border-subtle: ( "dark": $dark-border-subtle, ) !default; // scss-docs-end theme-border-subtle-map + $theme-colors-dark: null !default; $theme-colors-rgb-dark: null !default; $theme-colors-text-dark: null !default; @@ -51,7 +52,7 @@ $theme-colors-bg-subtle-dark: null !default; $theme-colors-border-subtle-dark: null !default; @if $enable-dark-mode { - // scss-docs-start theme-color-dark-map + // scss-docs-start theme-colors-dark-map $theme-colors-dark: ( "primary": $primary-dark, "secondary": $secondary-dark, @@ -62,7 +63,7 @@ $theme-colors-border-subtle-dark: null !default; "light": $light-dark, "dark": $dark-dark, ) !default; - // scss-docs-end theme-color-dark-map + // scss-docs-end theme-colors-dark-map // scss-docs-start theme-colors-rgb-dark $theme-colors-rgb-dark: map-loop($theme-colors-dark, to-rgb, "$value") !default; diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss index 05c6c94aab..433ea6ab61 100644 --- a/scss/_variables-dark.scss +++ b/scss/_variables-dark.scss @@ -8,14 +8,14 @@ // scss-docs-start sass-dark-mode-vars // scss-docs-start theme-color-dark-variables -$primary-dark: $blue !default; -$secondary-dark: $gray-600 !default; -$success-dark: $green !default; -$info-dark: $cyan !default; -$warning-dark: $yellow !default; -$danger-dark: $red !default; -$light-dark: $gray-100 !default; -$dark-dark: $gray-900 !default; +$primary-dark: $primary !default; +$secondary-dark: $secondary !default; +$success-dark: $success !default; +$info-dark: $info !default; +$warning-dark: $warning !default; +$danger-dark: $danger !default; +$light-dark: $light !default; +$dark-dark: $dark !default; // scss-docs-end theme-color-dark-variables // scss-docs-start theme-text-dark-variables diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md index 945d5ec336..0e82d0a650 100644 --- a/site/content/docs/5.3/customize/color-modes.md +++ b/site/content/docs/5.3/customize/color-modes.md @@ -206,6 +206,10 @@ $custom-colors: ( "custom-color": #712cf9 ); $theme-colors: map-merge($theme-colors, $custom-colors); +$custom-colors-dark: ( + "custom-color": #e1d2f2 +); +$theme-colors-dark: map-merge($theme-colors-dark, $custom-colors-dark); @import "maps"; @import "mixins"; diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md index 6a3c323b0c..895e95e5e2 100644 --- a/site/content/docs/5.3/customize/color.md +++ b/site/content/docs/5.3/customize/color.md @@ -382,6 +382,8 @@ All these colors are available as a Sass map, `$theme-colors`. {{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}} +{{< scss-docs name="theme-colors-dark-map" file="scss/_maps.scss" >}} + Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors. ### All colors diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index 27dff45910..aa4da8ac1c 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -7,6 +7,14 @@ aliases: "/migration/" toc: true --- +## v5.3.2 + +If you're migrating from our previous release of v5.3.0, please review its changes in addition to this section. + +### Color modes + +- Added a Sass map to customize theme colors CSS variables for dark mode. + ## v5.3.0 If you're migrating from our previous alpha releases of v5.3.0, please review their changes in addition to this section. diff --git a/site/content/docs/5.3/utilities/background.md b/site/content/docs/5.3/utilities/background.md index c17ed84706..547fd27a09 100644 --- a/site/content/docs/5.3/utilities/background.md +++ b/site/content/docs/5.3/utilities/background.md @@ -99,6 +99,8 @@ Most `background-color` utilities are generated by our theme colors, reassigned {{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}} +{{< scss-docs name="theme-color-dark-variables" file="scss/_variables-dark.scss" >}} + {{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}} Grayscale colors are also available, but only a subset are used to generate any utilities. @@ -117,6 +119,8 @@ Theme colors are then put into a Sass map so we can loop over them to generate o {{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}} +{{< scss-docs name="theme-colors-dark-map" file="scss/_maps.scss" >}} + Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.** {{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md index e2f2fac941..1e9ed08ad5 100644 --- a/site/content/docs/5.3/utilities/colors.md +++ b/site/content/docs/5.3/utilities/colors.md @@ -118,6 +118,8 @@ Theme colors are then put into a Sass map so we can loop over them to generate o {{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}} +{{< scss-docs name="theme-colors-dark-map" file="scss/_maps.scss" >}} + Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.** {{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}}