Change font color in navigation links to increase contrast (#2786)

Co-authored-by: E-Liang Tan <[email protected]>

Author: agnesnatasya

website/src/styles/bootstrap/variable-overrides.scss

@@ -3,6 +3,7 @@
 // Colors
 $gray-dark:                 #222324;
 $gray:                      #69707a;
+$gray-mid:                  #848490;
 $gray-light:                #aeb1b5;
 $gray-lighter:              #d3d6db;
 $gray-lightest:             #f3f5f8;

website/src/styles/utils/css-variables.scss

@@ -27,6 +27,7 @@
 
   // Shade of grays
   --gray: #{$gray};
+  --gray-mid: #{$gray-mid};
   --gray-light: #{$gray-light};
   --gray-lighter: #{$gray-lighter};
   --gray-lightest: #{$gray-lightest};
@@ -58,6 +59,7 @@ body.mode-dark {
 
   // Shade of grays
   --gray: #aaa;
+  --gray-mid: #7d7d7d;
   --gray-light: #666;
   --gray-lighter: #474747;
   --gray-lightest: #292929;

website/src/views/layout/Navtabs.scss

@@ -52,7 +52,7 @@
   flex: 1 0 auto;
   line-height: 1.6;
   text-align: center;
-  color: var(--gray-light);
+  color: var(--gray-mid);
   transition: color 0.15s;
 
   &.linkActive {