diff --git a/scss/_root.scss b/scss/_root.scss
index 0064f39b41..770ebda162 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -142,6 +142,7 @@
--#{$prefix}hover-color: #{$body-color};
--#{$prefix}active-bg: #{$gray-400};
--#{$prefix}disabled-color: #{$gray-500};
+ --#{$prefix}placeholder-color: #{$gray-700};
// ******* End additions for dark-mode
}
@@ -216,6 +217,7 @@
--#{$prefix}hover-color: #{$brand-orange};
--#{$prefix}active-bg: #{$gray-700};
--#{$prefix}disabled-color: #{$gray-700};
+ --#{$prefix}placeholder-color: #{$gray-600};
// ******* End additions for dark-mode
// scss-docs-end root-dark-mode-vars
}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 1fbe3179d3..a256fb44df 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1095,12 +1095,12 @@ $input-padding-y-lg: $input-btn-padding-y-lg !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-font-size-lg: $input-btn-font-size-lg !default;
-$input-bg: $white !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
-$input-disabled-color: $gray-700 !default; // Boosted mod
+$input-bg: var(--#{$prefix}body-bg) !default;
+$input-disabled-color: var(--#{$prefix}placeholder-color) !default; // Boosted mod
$input-disabled-bg: var(--#{$prefix}secondary-bg) !default;
$input-disabled-border-color: null !default;
-$input-color: $black !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
+$input-color: var(--#{$prefix}body-color) !default;
$input-border-color: var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of var(--#{$prefix}border-color)
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: none !default; // Boosted mod
@@ -1115,7 +1115,7 @@ $input-focus-color: $input-color !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: none !default; // Boosted mod
-$input-placeholder-color: var(--#{$prefix}secondary-color) !default;
+$input-placeholder-color: var(--#{$prefix}placeholder-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
$input-plaintext-color: var(--#{$prefix}body-color) !default;
// Boosted mod: no $input-height-border
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index f7cb92f58a..5c4b5ac9c9 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -646,6 +646,78 @@ Additional variables for dark-mode (temporary)
## Forms
+### Controls
+
+No theme
+
+
+
+
+
+
+
+
+
+
+
+
+
+Dark theme on container
+
+
+
+
+
+
+
+
+
+
+
+
+
+Light theme on container
+
+
+
+
+
+
+
+
+
+
+
+
+
+Dark theme on component
+
+
+
+
+
+
+
+
+
+
+
+
+
+Light theme on component
+
+
+
+
+
+
+
+
+
+
+
+
+
### Range
No theme
@@ -696,6 +768,29 @@ Additional variables for dark-mode (temporary)
+
+
Star rating: rated 3 out of 5
+
+
+
+
+
+
+
+
Dark theme on container
@@ -714,6 +809,29 @@ Additional variables for dark-mode (temporary)
+
+
Star rating: rated 3 out of 5
+
+
+
+
+
+
+
+
Light theme on container
@@ -732,6 +850,29 @@ Additional variables for dark-mode (temporary)
+
+
Star rating: rated 3 out of 5
+
+
+
+
+
+
+
+
Dark theme on component
@@ -750,6 +891,29 @@ Additional variables for dark-mode (temporary)
+
+
Star rating: rated 3 out of 5
+
+
+
+
+
+
+
+
Light theme on component
@@ -768,4 +932,27 @@ Additional variables for dark-mode (temporary)
+
+
Star rating: rated 3 out of 5
+
+
+
+
+
+
+
+