Proposal to offer a customization way for dark mode

diff --git a/scss/_maps.scss b/scss/_maps.scss
index 68ee421c2b1fa6277a9b606b0d789561292284d6..2e299488faa46119c02d97f497a5221e5135e4c1 100644 (file)
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -44,12 +44,30 @@ $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;
 $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
+  $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-color-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,

diff --git a/scss/_root.scss b/scss/_root.scss
index e7cff705618d54891d4538c9c55740884846c10c..24961635be3244c63fbf0e32dabcfd8bf4ce8364 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -153,6 +153,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};
     }

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 10ae120de9cd9454159f7028a55061de46594571..e2b38f56ce1d25699928c36b368244ce8dbe934e 100644 (file)
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -7,35 +7,46 @@
 //
 
 // 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;
+// 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:               null !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;