Color mode: Customization of dark theme

scss/_maps.scss

@@ -45,11 +45,30 @@ $theme-colors-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;
 $theme-colors-bg-subtle-dark: null !default;
 $theme-colors-border-subtle-dark: null !default;
 
 @if $enable-dark-mode {
+  // scss-docs-start theme-colors-dark-map
+  $theme-colors-dark: (
+    "primary": $primary-dark,
+    "secondary": $secondary-dark,
+    "success": $success-dark,
+    "info": $info-dark,
+    "warning": $warning-dark,
+    "danger": $danger-dark,
+    "light": $light-dark,
+    "dark": $dark-dark,
+  ) !default;
+  // 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-docs-end theme-colors-rgb-dark
+
   // scss-docs-start theme-text-dark-map
   $theme-colors-text-dark: (
     "primary": $primary-text-emphasis-dark,

scss/_root.scss

@@ -151,6 +151,14 @@
     --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
     --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
 
+    @each $color, $value in $theme-colors-dark {
+      --#{$prefix}#{$color}: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-rgb-dark {
+      --#{$prefix}#{$color}-rgb: #{$value};
+    }
+
     @each $color, $value in $theme-colors-text-dark {
       --#{$prefix}#{$color}-text-emphasis: #{$value};
     }

scss/_variables-dark.scss

@@ -7,35 +7,46 @@
 //
 
 // scss-docs-start sass-dark-mode-vars
+// scss-docs-start theme-color-dark-variables
+$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
-$primary-text-emphasis-dark:        tint-color($primary, 40%) !default;
-$secondary-text-emphasis-dark:      tint-color($secondary, 40%) !default;
-$success-text-emphasis-dark:        tint-color($success, 40%) !default;
-$info-text-emphasis-dark:           tint-color($info, 40%) !default;
-$warning-text-emphasis-dark:        tint-color($warning, 40%) !default;
-$danger-text-emphasis-dark:         tint-color($danger, 40%) !default;
+$primary-text-emphasis-dark:        tint-color($primary-dark, 40%) !default;
+$secondary-text-emphasis-dark:      tint-color($secondary-dark, 40%) !default;
+$success-text-emphasis-dark:        tint-color($success-dark, 40%) !default;
+$info-text-emphasis-dark:           tint-color($info-dark, 40%) !default;
+$warning-text-emphasis-dark:        tint-color($warning-dark, 40%) !default;
+$danger-text-emphasis-dark:         tint-color($danger-dark, 40%) !default;
 $light-text-emphasis-dark:          $gray-100 !default;
 $dark-text-emphasis-dark:           $gray-300 !default;
 // scss-docs-end theme-text-dark-variables
 
 // scss-docs-start theme-bg-subtle-dark-variables
-$primary-bg-subtle-dark:            shade-color($primary, 80%) !default;
-$secondary-bg-subtle-dark:          shade-color($secondary, 80%) !default;
-$success-bg-subtle-dark:            shade-color($success, 80%) !default;
-$info-bg-subtle-dark:               shade-color($info, 80%) !default;
-$warning-bg-subtle-dark:            shade-color($warning, 80%) !default;
-$danger-bg-subtle-dark:             shade-color($danger, 80%) !default;
+$primary-bg-subtle-dark:            shade-color($primary-dark, 80%) !default;
+$secondary-bg-subtle-dark:          shade-color($secondary-dark, 80%) !default;
+$success-bg-subtle-dark:            shade-color($success-dark, 80%) !default;
+$info-bg-subtle-dark:               shade-color($info-dark, 80%) !default;
+$warning-bg-subtle-dark:            shade-color($warning-dark, 80%) !default;
+$danger-bg-subtle-dark:             shade-color($danger-dark, 80%) !default;
 $light-bg-subtle-dark:              $gray-800 !default;
 $dark-bg-subtle-dark:               mix($gray-800, $black) !default;
 // scss-docs-end theme-bg-subtle-dark-variables
 
 // scss-docs-start theme-border-subtle-dark-variables
-$primary-border-subtle-dark:        shade-color($primary, 40%) !default;
-$secondary-border-subtle-dark:      shade-color($secondary, 40%) !default;
-$success-border-subtle-dark:        shade-color($success, 40%) !default;
-$info-border-subtle-dark:           shade-color($info, 40%) !default;
-$warning-border-subtle-dark:        shade-color($warning, 40%) !default;
-$danger-border-subtle-dark:         shade-color($danger, 40%) !default;
+$primary-border-subtle-dark:        shade-color($primary-dark, 40%) !default;
+$secondary-border-subtle-dark:      shade-color($secondary-dark, 40%) !default;
+$success-border-subtle-dark:        shade-color($success-dark, 40%) !default;
+$info-border-subtle-dark:           shade-color($info-dark, 40%) !default;
+$warning-border-subtle-dark:        shade-color($warning-dark, 40%) !default;
+$danger-border-subtle-dark:         shade-color($danger-dark, 40%) !default;
 $light-border-subtle-dark:          $gray-700 !default;
 $dark-border-subtle-dark:           $gray-800 !default;
 // scss-docs-end theme-border-subtle-dark-variables
@@ -50,7 +61,7 @@ $body-emphasis-color-dark:          $white !default;
 $border-color-dark:                 $gray-700 !default;
 $border-color-translucent-dark:     rgba($white, .15) !default;
 $headings-color-dark:               inherit !default;
-$link-color-dark:                   tint-color($primary, 40%) !default;
+$link-color-dark:                   tint-color($primary-dark, 40%) !default;
 $link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
 $code-color-dark:                   tint-color($code-color, 40%) !default;
 

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

@@ -98,6 +98,8 @@ Most `color` utilities are generated by our theme colors, reassigned from our ge
 
 {{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}}
 
+{{< scss-docs name="theme-color-dark-variables" file="scss/_variables-dark.scss" >}}
+
 Grayscale colors are also available, but only a subset are used to generate any utilities.
 
 {{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}}
@@ -116,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" >}}