First try on color-mix

scss/_buttons.scss

@@ -134,6 +134,7 @@
       @include button-variant(
         $value,
         $value,
+        color-contrast($value),
         $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
         $hover-border: shade-color($value, $btn-hover-border-shade-amount),
         $active-background: shade-color($value, $btn-active-bg-shade-amount),
@@ -143,13 +144,14 @@
       @include button-variant(
         $value,
         $value,
+        color-contrast($value),
         $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
         $hover-border: tint-color($value, $btn-hover-border-tint-amount),
         $active-background: tint-color($value, $btn-active-bg-tint-amount),
         $active-border: tint-color($value, $btn-active-border-tint-amount)
       );
     } @else {
-      @include button-variant($value, $value);
+      @include button-variant(var(--#{$prefix}#{$color}), var(--#{$prefix}#{$color}), var(--#{$prefix}on-#{$color}));
     }
   }
 }

scss/_maps.scss

@@ -1,11 +1,22 @@
 // Re-assigned maps
 //
 // Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
+@function test-modify($value, $tint-value) {
+  @if color-contrast($value) == $color-contrast-light {
+    @return shade-color($value, $tint-value);
+  }
+
+  @return tint-color($value, $tint-value);
+}
 
 // scss-docs-start theme-colors-rgb
 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
 // scss-docs-end theme-colors-rgb
 
+// scss-docs-start theme-colors-rgb
+$on-theme-colors: map-loop($theme-colors, color-contrast, "$value") !default;
+// scss-docs-end theme-colors-rgb
+
 // scss-docs-start theme-text-map
 $theme-colors-text: (
   "primary": $primary-text-emphasis,
@@ -45,11 +56,35 @@ $theme-colors-border-subtle: (
 ) !default;
 // scss-docs-end theme-border-subtle-map
 
+$theme-colors-dark: null !default;
+$on-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-colors-rgb
+  $on-theme-colors-dark: map-loop($theme-colors-dark, color-contrast, "$value") !default;
+  // scss-docs-end theme-colors-rgb
+
   // scss-docs-start theme-text-dark-map
   $theme-colors-text-dark: (
     "primary": $primary-text-emphasis-dark,

scss/_root.scss

@@ -18,6 +18,10 @@
     --#{$prefix}#{$color}: #{$value};
   }
 
+  @each $color, $value in $on-theme-colors {
+    --#{$prefix}on-#{$color}: #{$value};
+  }
+
   @each $color, $value in $theme-colors-rgb {
     --#{$prefix}#{$color}-rgb: #{$value};
   }
@@ -152,6 +156,18 @@
     --#{$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 $on-theme-colors-dark {
+      --#{$prefix}on-#{$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:                      #f00 !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;
 $mark-color-dark:                   $body-color-dark !default;

scss/mixins/_buttons.scss

@@ -7,16 +7,16 @@
 @mixin button-variant(
   $background,
   $border,
-  $color: color-contrast($background),
-  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
-  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
-  $hover-color: color-contrast($hover-background),
-  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
-  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
-  $active-color: color-contrast($active-background),
+  $color,
+  $hover-background: color-mix(in srgb, $background 85%, var(--#{$prefix}body-color)),
+  $hover-border: color-mix(in srgb, $background 85%, var(--#{$prefix}body-color)),
+  $hover-color: $color,
+  $active-background: color-mix(in srgb, $background 70%, var(--#{$prefix}body-color)),
+  $active-border: color-mix(in srgb, $background 70%, var(--#{$prefix}body-color)),
+  $active-color: $color,
   $disabled-background: $background,
   $disabled-border: $border,
-  $disabled-color: color-contrast($disabled-background)
+  $disabled-color: $color
 ) {
   --#{$prefix}btn-color: #{$color};
   --#{$prefix}btn-bg: #{$background};
@@ -24,7 +24,7 @@
   --#{$prefix}btn-hover-color: #{$hover-color};
   --#{$prefix}btn-hover-bg: #{$hover-background};
   --#{$prefix}btn-hover-border-color: #{$hover-border};
-  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
+  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}primary-border-subtle);
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-background};
   --#{$prefix}btn-active-border-color: #{$active-border};

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

@@ -384,6 +384,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

@@ -98,6 +98,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.
@@ -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" >}}

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