diff --git a/scss/_forms.scss b/scss/_forms.scss
index 7b17d849ac..bd8a2c5124 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -1,3 +1,25 @@
+:root {
+  // scss-docs-start root-form-validation-variables
+  --#{$prefix}form-valid-color: #{$form-valid-color};
+  --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
+  --#{$prefix}form-valid-icon: #{$form-feedback-icon-valid};
+  --#{$prefix}form-invalid-color: #{$form-invalid-color};
+  --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
+  --#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid};
+  // scss-docs-end root-form-validation-variables
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    --#{$prefix}form-valid-color: #{$form-valid-color-dark};
+    --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
+    --#{$prefix}form-valid-icon: #{$form-feedback-icon-valid-dark};
+    --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
+    --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
+    --#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid-dark};
+  }
+}
+
 @import "forms/labels";
 @import "forms/form-text";
 @import "forms/form-control";
diff --git a/scss/_root.scss b/scss/_root.scss
index 566c8b45a9..6c3f52ddd5 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -119,15 +119,6 @@
   --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
   --#{$prefix}focus-ring-color: #{$focus-ring-color};
   // scss-docs-end root-focus-variables
-
-  // scss-docs-start root-form-validation-variables
-  --#{$prefix}form-valid-color: #{$form-valid-color};
-  --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
-  --#{$prefix}form-valid-icon: #{$form-feedback-icon-valid};
-  --#{$prefix}form-invalid-color: #{$form-invalid-color};
-  --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
-  --#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid};
-  // scss-docs-end root-form-validation-variables
 }
 
 @if $enable-dark-mode {
@@ -176,13 +167,6 @@
 
     --#{$prefix}border-color: #{$border-color-dark};
     --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
-
-    --#{$prefix}form-valid-color: #{$form-valid-color-dark};
-    --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
-    --#{$prefix}form-valid-icon: #{$form-feedback-icon-valid-dark};
-    --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
-    --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
-    --#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid-dark};
     // scss-docs-end root-dark-mode-vars
   }
 }
diff --git a/site/content/docs/5.3/forms/validation.md b/site/content/docs/5.3/forms/validation.md
index c66bbaf87c..a0e0979f7d 100644
--- a/site/content/docs/5.3/forms/validation.md
+++ b/site/content/docs/5.3/forms/validation.md
@@ -357,7 +357,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
 
 As part of Bootstrap's evolving CSS variables approach, forms now use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
-{{< scss-docs name="root-form-validation-variables" file="scss/_root.scss" >}}
+{{< scss-docs name="root-form-validation-variables" file="scss/_forms.scss" >}}
 
 These variables are also color mode adaptive, meaning they change color while in dark mode.