diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 71619382cd..bba649199e 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -7,21 +7,21 @@
   // scss-docs-start navbar-css-vars
   --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
   --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
-  --#{$prefix}navbar-color: #{$navbar-light-color};
-  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
-  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
-  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
+  --#{$prefix}navbar-color: #{$navbar-color};
+  --#{$prefix}navbar-hover-color: #{$navbar-hover-color};
+  --#{$prefix}navbar-disabled-color: #{$navbar-disabled-color};
+  --#{$prefix}navbar-active-color: #{$navbar-active-color};
   --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
   --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
   --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
-  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
-  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
+  --#{$prefix}navbar-brand-color: #{$navbar-brand-color};
+  --#{$prefix}navbar-brand-hover-color: #{$navbar-brand-hover-color};
   --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
   --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
   --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
   --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
-  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
-  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
+  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-toggler-icon-bg)};
+  --#{$prefix}navbar-toggler-border-color: #{$navbar-toggler-border-color};
   --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
   --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
   --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2d70310a51..351b76b550 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1186,9 +1186,26 @@ $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
 
 // Navbar
 
+// scss-docs-start navbar-deprecated-variables
+$navbar-light-color:                rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default; // Deprecated in v5.3
+$navbar-light-hover-color:          rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default; // Deprecated in v5.3
+$navbar-light-active-color:         rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default; // Deprecated in v5.3
+$navbar-light-disabled-color:       rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default; // Deprecated in v5.3
+$navbar-light-icon-color:           rgba($body-color, .75) !default; // Deprecated in v5.3
+$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;  // Deprecated in v5.3
+$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;  // Deprecated in v5.3
+$navbar-light-brand-color:          $navbar-light-active-color !default; // Deprecated in v5.3
+$navbar-light-brand-hover-color:    $navbar-light-active-color !default;  // Deprecated in v5.3
+// scss-docs-end navbar-deprecated-variables
+
 // scss-docs-start navbar-variables
 $navbar-padding-y:                  $spacer * .5 !default;
 $navbar-padding-x:                  null !default;
+$navbar-color:                      $navbar-light-color !default;
+$navbar-hover-color:                $navbar-light-hover-color !default;
+$navbar-active-color:               $navbar-light-active-color !default;
+$navbar-disabled-color:             $navbar-light-disabled-color !default;
+$navbar-icon-color:                 $navbar-light-icon-color !default;
 
 $navbar-nav-link-padding-x:         .5rem !default;
 
@@ -1198,6 +1215,8 @@ $nav-link-height:                   $font-size-base * $line-height-base + $nav-l
 $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
 $navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5 !default;
 $navbar-brand-margin-end:           1rem !default;
+$navbar-brand-color:                if($navbar-light-active-color == $navbar-light-brand-color, $navbar-active-color, $navbar-light-brand-color) !default;
+$navbar-brand-hover-color:          if($navbar-light-brand-hover-color == $navbar-light-active-color, $navbar-active-color, $navbar-light-brand-hover-color) !default;
 
 $navbar-toggler-padding-y:          .25rem !default;
 $navbar-toggler-padding-x:          .75rem !default;
@@ -1205,16 +1224,8 @@ $navbar-toggler-font-size:          $font-size-lg !default;
 $navbar-toggler-border-radius:      $btn-border-radius !default;
 $navbar-toggler-focus-width:        $btn-focus-width !default;
 $navbar-toggler-transition:         box-shadow .15s ease-in-out !default;
-
-$navbar-light-color:                rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
-$navbar-light-hover-color:          rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
-$navbar-light-active-color:         rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
-$navbar-light-disabled-color:       rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
-$navbar-light-icon-color:           rgba($body-color, .75) !default;
-$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
-$navbar-light-brand-color:          $navbar-light-active-color !default;
-$navbar-light-brand-hover-color:    $navbar-light-active-color !default;
+$navbar-toggler-icon-bg:            if($navbar-light-toggler-icon-bg == url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>"), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{if($navbar-light-icon-color == rgba($body-color, .75), $navbar-icon-color, $navbar-light-icon-color)}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>"), $navbar-light-toggler-icon-bg) !default;  // Deprecated in v5.3
+$navbar-toggler-border-color:       $navbar-light-toggler-border-color !default;
 // scss-docs-end navbar-variables
 
 // scss-docs-start navbar-dark-variables
diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md
index ab6c2305ce..78c1750b03 100644
--- a/site/content/docs/5.3/components/navbar.md
+++ b/site/content/docs/5.3/components/navbar.md
@@ -806,6 +806,10 @@ Variables for all navbars:
 
 {{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}}
 
+Deprecated variables for the [light navbar](#color-schemes):
+
+{{< scss-docs name="navbar-deprecated-variables" file="scss/_variables.scss" >}}
+
 Variables for the [dark navbar](#color-schemes):
 
 {{< scss-docs name="navbar-dark-variables" file="scss/_variables.scss" >}}