Merge pull request #2952 from Samir-Rashid/fix-theme-color-regressions

Fix theme color regressions

Author: rjzupkoii

_sass/layout/_base.scss

@@ -139,23 +139,30 @@ a > code,
 figcaption > code,
 li > code,
 p > code,
-pre > code,
 td > code {
+  color: var(--global-code-text-color);
   padding-top: 0.1rem;
   padding-bottom: 0.1rem;
   font-size: $type-size-6;
   background: var(--global-code-background-color);
   border: 1px solid var(--global-thead-color);
   border-radius: $border-radius;
   box-shadow: $box-shadow;
-  color: var(--global-code-text-color);
 
   &:before, &:after {
     letter-spacing: -0.2em;
     content: "\00a0"; /* non-breaking space*/
   }
 }
 
+a > code {
+    color: inherit;
+}
+
+pre > code {
+  color: var(--global-code-text-color);
+}
+
 /* horizontal rule */
 
 hr {

_sass/layout/_footer.scss

@@ -4,7 +4,7 @@
 
 .page__footer {
   @include clearfix;
-  background-color: var(--global-bg-color);
+  background-color: var(--global-footer-bg-color);
   color: var(--global-text-color-light);
 
   float: left;
@@ -25,7 +25,7 @@
           animation: intro 0.3s both;
   -webkit-animation-delay: 0.45s;
           animation-delay: 0.45s;
-  border-top: 1px solid var(var(--global-border-color));
+  border-top: 1px solid var(--global-dark-border-color);
 
   footer {
     @include clearfix;

_sass/layout/_navigation.scss

@@ -84,7 +84,7 @@
       text-align: center;
       text-decoration: none;
       color: var(--global-text-color-light);
-      border: 1px solid var(var(--global-border-color));
+      border: 1px solid var(--global-border-color);
       border-radius: 0;
 
       &:hover {
@@ -132,7 +132,7 @@
     text-align: center;
     text-decoration: none;
     color: var(--global-text-color-light);
-    border: 1px solid var(var(--global-border-color));
+    border: 1px solid var(--global-border-color);
     border-radius: $border-radius;
 
     &:hover {
@@ -409,7 +409,7 @@
   a {
     display: block;
     padding: 0.5rem 1rem;
-    color: var(--global-text-color-light);
+    color: var(--global-code-text-color);
     font-size: $type-size-7;
     font-weight: bold;
     line-height: 1.5;

_sass/theme/_dark.scss

@@ -37,7 +37,9 @@ $sidebar-screen-min-width   : 1024px;
 html[data-theme="dark"] {
     --global-base-color                 : #{$background};
     --global-bg-color                   : #{$background};
-    --global-border-color               : #{$background-light};
+    --global-footer-bg-color            : #{$background};
+    --global-border-color               : #{$light-gray};
+    --global-dark-border-color          : #{$background-light};
     --global-code-background-color      : #fafafa;
     --global-code-text-color            : #{$darker-gray};
     --global-fig-caption-color          : #{$dark-gray};

_sass/theme/_default.scss

@@ -6,7 +6,7 @@
 $gray                       : #7a8288;
 $dark-gray                  : mix(#000, $gray, 40%);
 $darker-gray                : mix(#000, $gray, 60%);
-$light-gray                 : mix(#fff, $gray, 50%);
+$light-gray                 : #9ba1a6;
 $lighter-gray               : mix(#fff, $gray, 90%);
 
 /* Color codes used for the site */
@@ -30,11 +30,13 @@ $sidebar-screen-min-width   : 1024px;
 :root {
     --global-base-color                 : #{$gray};
     --global-bg-color                   : #fff;
+    --global-footer-bg-color            : #f2f3f3;
     --global-border-color               : #{$lighter-gray};
+    --global-dark-border-color          : #bdc1c4;
     --global-code-background-color      : #fafafa;
     --global-code-text-color            : #{$darker-gray};
     --global-fig-caption-color          : mix(#fff,  #{$dark-gray}, 25%);
-    --global-link-color                 : #2f7f93;
+    --global-link-color                 : #52adc8;
     --global-link-color-hover           : mix(#000, #2f7f93, 25%);
     --global-link-color-visited         : mix(#fff, #2f7f93, 25%);  
     --global-masthead-link-color        : #{$dark-gray};