Set all squares background to the right color for dark color mode

Orange-OpenSource · Oct 13, 2023 · b143cb2 · b143cb2
1 parent 8338605
commit b143cb2
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 18 deletions.
diff --git 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
@@ -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
@@ -2168,33 +2168,33 @@ sitemap_exclude: true
 <h4 class="mt-3">Dark theme on component</h4>
 
 <div class="d-flex border border-tertiary p-3" style="background-color: #282d55;">
-  <div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" role="switch" data-bs-theme="dark">
+  <div class="form-check form-switch" data-bs-theme="dark">
+    <input class="form-check-input" type="checkbox" role="switch">
   </div>
-  <div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" role="switch" data-bs-theme="dark" checked>
+  <div class="form-check form-switch" data-bs-theme="dark">
+    <input class="form-check-input" type="checkbox" role="switch" checked>
   </div>
-  <div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" role="switch" data-bs-theme="dark" disabled>
+  <div class="form-check form-switch" data-bs-theme="dark">
+    <input class="form-check-input" type="checkbox" role="switch" disabled>
   </div>
-  <div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" role="switch" data-bs-theme="dark" checked disabled>
+  <div class="form-check form-switch" data-bs-theme="dark">
+    <input class="form-check-input" type="checkbox" role="switch" checked disabled>
   </div>
 </div>
 
 <h4 class="mt-3">Light theme on component</h4>
 
 <div class="d-flex border border-tertiary p-3" style="background-color: #b5e8f7">
-  <div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" role="switch" data-bs-theme="light">
+  <div class="form-check form-switch" data-bs-theme="light">
+    <input class="form-check-input" type="checkbox" role="switch">
   </div>
-  <div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" role="switch" data-bs-theme="light" checked>
+  <div class="form-check form-switch" data-bs-theme="light">
+    <input class="form-check-input" type="checkbox" role="switch" checked>
   </div>
-  <div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" role="switch" data-bs-theme="light" disabled>
+  <div class="form-check form-switch" data-bs-theme="light">
+    <input class="form-check-input" type="checkbox" role="switch" disabled>
   </div>
-  <div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" role="switch" data-bs-theme="light" checked disabled>
+  <div class="form-check form-switch" data-bs-theme="light">
+    <input class="form-check-input" type="checkbox" role="switch" checked disabled>
   </div>
 </div>