fix(review)

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;

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;
+$primary-dark:                      $primary !default;
-$secondary-dark:                    $gray-600 !default;
+$secondary-dark:                    $secondary !default;
-$success-dark:                      $green !default;
+$success-dark:                      $success !default;
-$info-dark:                         $cyan !default;
+$info-dark:                         $info !default;
-$warning-dark:                      $yellow !default;
+$warning-dark:                      $warning !default;
-$danger-dark:                       $red !default;
+$danger-dark:                       $danger !default;
-$light-dark:                        $gray-100 !default;
+$light-dark:                        $light !default;
-$dark-dark:                         $gray-900 !default;
+$dark-dark:                         $dark !default;
 // scss-docs-end theme-color-dark-variables
 
 // scss-docs-start theme-text-dark-variables

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";

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

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.

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" >}}

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" >}}