fix(review)

diff --git a/scss/_maps.scss b/scss/_maps.scss
index 2e299488faa46119c02d97f497a5221e5135e4c1..db25773e59ee1ca3a2dd9e99ebb28e14fdec660d 100644 (file)
--- 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 05c6c94aab20dda0788f0cebc94115d32ff02d38..433ea6ab61d5cbe388879457f1da4520623afeae 100644 (file)
--- 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 945d5ec336c09b7027f9e6bbc021a7a43ef250fe..0e82d0a65007454a375472b7f85c735a6e97ba6f 100644 (file)
--- 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 6a3c323b0c7ee662b05aae6c2a60fb08e1c522cc..895e95e5e2e64d17c3e2bbe1efb29585da6ece19 100644 (file)
--- 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 27dff45910b998e267b705bcbe184703deee0451..aa4da8ac1c0925ef7dda6e39ef63e2d801ee090e 100644 (file)
--- 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 c17ed847061cbd01d00f0abded390942711607d6..547fd27a09883cc323440cc78304bbd79407a402 100644 (file)
--- 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 e2f2fac941a7b92f12c59f64ad53aca214540efb..1e9ed08ad5dd9c567a8c6b0a642a12b40786b46c 100644 (file)
--- 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" >}}