fixes #9909: Add component active color variable to complement component active bg variable

customize.html

@@ -554,10 +554,14 @@ base_url: "../"
         <input type="text" class="form-control" placeholder="6px" data-var="@border-radius-large">
         <label>@border-radius-small</label>
         <input type="text" class="form-control" placeholder="3px" data-var="@border-radius-small">
+        <h4>Active text color</h4>
+        <label>@component-active-color</label>
+        <input type="text" class="form-control" placeholder="#fff" data-var="@component-active-color">
+        <p class="help-block">Global color for active items (e.g., navs or dropdowns)</p>
         <h4>Active background color</h4>
         <label>@component-active-bg</label>
         <input type="text" class="form-control" placeholder="@brand-primary" data-var="@component-active-bg">
-        <p class="help-block">Used for active or hovered items in places like navs or dropdowns.</p>
+        <p class="help-block">Global background color for active items (e.g., navs or dropdowns)</p>
       </div>
     </div>
 
@@ -923,7 +927,7 @@ base_url: "../"
         <p class="help-block">Hovered dropdown menu entry text color</p>
 
         <label>@dropdown-link-active-color</label>
-        <input type="text" class="form-control" placeholder="#fff" data-var="@dropdown-link-active-color">
+        <input type="text" class="form-control" placeholder="@component-active-color" data-var="@dropdown-link-active-color">
         <p class="help-block">Active dropdown menu entry text color</p>
         <label>@dropdown-link-active-bg</label>
         <input type="text" class="form-control" placeholder="@component-active-bg" data-var="@dropdown-link-active-bg">

less/variables.less

@@ -91,6 +91,7 @@
 @border-radius-large:            6px;
 @border-radius-small:            3px;
 
+@component-active-color:         #fff;
 @component-active-bg:            @brand-primary;
 
 @caret-width-base:               4px;
@@ -178,7 +179,7 @@
 @dropdown-link-hover-color:      darken(@gray-dark, 5%);
 @dropdown-link-hover-bg:         #f5f5f5;
 
-@dropdown-link-active-color:     #fff;
+@dropdown-link-active-color:     @component-active-color;
 @dropdown-link-active-bg:        @component-active-bg;
 
 @dropdown-link-disabled-color:   @gray-light;