diff --git a/scss/_root.scss b/scss/_root.scss index f7506fd87b..4d75995e91 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -145,6 +145,7 @@ --#{$prefix}disabled-filter: #{$disabled-filter}; --#{$prefix}placeholder-color: #{$gray-700}; --#{$prefix}gray-tweak: #{$gray-900}; + --#{$prefix}black-tweak: #{$black}; --#{$prefix}input-filter: #{$invert-filter}; // ******* End additions for dark-mode } @@ -223,6 +224,7 @@ --#{$prefix}disabled-filter: #{$disabled-filter-dark}; --#{$prefix}placeholder-color: #{$gray-600}; --#{$prefix}gray-tweak: #{$gray-700}; + --#{$prefix}black-tweak: #{$gray-950}; --#{$prefix}input-filter: #{none}; // ******* End additions for dark-mode // scss-docs-end root-dark-mode-vars diff --git a/scss/_variables.scss b/scss/_variables.scss index 655b67bcbc..7c3598a796 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1231,7 +1231,7 @@ $form-switch-bg-square-size: add(1rem, $spacer * .5) !default; // Boosted $form-switch-border-radius: null !default; // Boosted mod $form-switch-transition: background-position .15s ease-in-out, $transition-focus !default; // Boosted mod -$form-switch-square-bg: $black !default; // Boosted mod +$form-switch-square-bg: var(--#{$prefix}black-tweak) !default; // Boosted mod $form-switch-bg: $white !default; // Boosted mod $form-switch-border-color: $white !default; // Boosted mod $form-switch-filter: var(--#{$prefix}input-filter) !default; // Boosted mod @@ -1247,7 +1247,7 @@ $form-switch-checked-bg-size: add(map-get($spacers, 2), map-get($spacers, 1) // stylelint-disable-next-line function-disallowed-list $form-switch-checked-bg-position: calc(var(--#{$prefix}border-width) * 3) 50% !default; // Boosted mod -$form-switch-checked-square-bg: var(--#{$prefix}highlight-color) !default; // Boosted mod +$form-switch-checked-square-bg: var(--#{$prefix}body-bg) !default; // Boosted mod $form-switch-checked-bg: $primary !default; // Boosted mod $form-switch-checked-border-color: $primary !default; // Boosted mod $form-switch-checked-filter: none !default; // Boosted mod diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index 6c5d0b0f03..9982f7ffcf 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -2168,33 +2168,33 @@ sitemap_exclude: true

Dark theme on component

-
- +
+
-
- +
+
-
- +
+
-
- +
+

Light theme on component

-
- +
+
-
- +
+
-
- +
+
-
- +
+