diff --git a/scss/_root.scss b/scss/_root.scss
index 560de0834f..f7506fd87b 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -144,6 +144,8 @@
--#{$prefix}disabled-color: #{$gray-500};
--#{$prefix}disabled-filter: #{$disabled-filter};
--#{$prefix}placeholder-color: #{$gray-700};
+ --#{$prefix}gray-tweak: #{$gray-900};
+ --#{$prefix}input-filter: #{$invert-filter};
// ******* End additions for dark-mode
}
@@ -220,6 +222,8 @@
--#{$prefix}disabled-color: #{$gray-700};
--#{$prefix}disabled-filter: #{$disabled-filter-dark};
--#{$prefix}placeholder-color: #{$gray-600};
+ --#{$prefix}gray-tweak: #{$gray-700};
+ --#{$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 35c32a14f5..ad3a3f5d04 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1166,7 +1166,8 @@ $form-check-input-checked-color: $component-active-color !default;
$form-check-input-checked-bg-color: $component-active-bg !default;
$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
$form-check-input-checked-bg-image: var(--#{$prefix}check-icon) !default;
-$form-check-input-disabled-color: $gray-900 !default; // Boosted mod
+$form-check-input-disabled-color: var(--#{$prefix}gray-tweak) !default; // Boosted mod
+$form-check-input-disabled-filter: var(--#{$prefix}input-filter) !default; // Boosted mod
$form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default;
$form-check-input-indeterminate-color: $form-check-input-checked-color !default;
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index bd3ce9acc2..e68035014b 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -113,9 +113,9 @@
// Boosted mod
&:checked,
- &:indeterminate {
+ &[type="checkbox"]:indeterminate {
background-color: $form-check-input-disabled-color;
- filter: $invert-filter;
+ filter: $form-check-input-disabled-filter;
border-color: $form-check-input-disabled-color;
}
// End mod
@@ -387,4 +387,4 @@
// End mod
}
-// Boosted mod: no `@if enable-dark-mode` since Boosted doesn't have any dark mode for now
+// Boosted mod: no `@if enable-dark-mode`
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index fbe0365b5c..dee8d368d8 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -106,6 +106,16 @@ sitemap_exclude: true
+
+
+
--bs-input-filter
+
+
+
No theme
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Dark theme on container
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Light theme on container
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Dark theme on component
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Light theme on component
+
+
+
+
+
+
+
+
+
+
+
+
+
+
### Controls
No theme