Improve colors in dark theme

techworkersco · Mar 25, 2024 · 0b1cadd · 0b1cadd
1 parent 42f5f39
commit 0b1cadd
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 36 deletions.
diff --git a/_includes/main.scss b/_includes/main.scss
@@ -43,8 +43,6 @@ header {
 
   .desktop-header {
     margin-left:10px;
-    background-color: #020e0f;
-    color: $white;
     font-weight: normal;
     padding: 4px 14px;
     border-radius: 100px;
@@ -54,11 +52,6 @@ header {
       display: none;
     }
 
-    &:hover {
-      background-color: red;
-      fill: red;
-    }
-
     a {
      color: $white; 
     }
@@ -75,11 +68,10 @@ header {
     }
   }
 
-  li.mobile-links a {
+  li.mobile-links {
     background: #020e0f;
     color: #fff;
     border: $black solid 1px;
-    font-weight: normal;
   }
 
   #nav, #navBtn {
@@ -101,11 +93,6 @@ header {
   }
 }
 
-.bg-black {
-  background: $black;
-  color: $white;
-}
-
 .lh-1 {
   line-height: 1;
 }
@@ -450,24 +437,15 @@ label {
 }
 
 .primaryBg {
-  background: $grey2;
+  background: $grey;
 }
 .secondaryBg {
-  background: $grey;
+  background: $grey2;
 }
 .textColor {
   color: $white;
 }
 
-a {
-  &:link {
-    color: $red;
-  }
-  &:visited {
-    color: $red;
-  }
-}
-
 label {
   font-weight: inherit;
 
@@ -529,13 +507,10 @@ hr {
   height: 40px;
   min-width: 40px;
   width: 40px;
+  fill: $black;
 }
 
 @media (prefers-color-scheme: light) {
-  .card-icon {
-    fill: $black;
-  }
-
   .bg-black {
     background-color: $grey3;
     color: $black;
@@ -589,19 +564,35 @@ hr {
     &:focus {
       color: $grey;
     }
-    &:active {
+    &:active,
+    &:link,
+    &:visited {
       color: $red;
     }
   }
-}
+
+  .desktop-header {
+    background-color: #020e0f;
+    color: $white;
+
+    &:hover {
+      background-color: red;
+      fill: red;
+    }
+  }
+
+}  
 
 @media (prefers-color-scheme: dark) {
   h2 a:link {
     color: $white;
   }
-  .card-icon {
-    fill: $red;
+
+  .bg-black {
+    background: $white;
+    color: $black;
   }
+
   .border {
     border-color:$white;
   }
@@ -641,17 +632,38 @@ hr {
     color: $white;
   }
   a {
+    &:active,
+    &:link,
+    &:visited {
+      color: $white;
+    }
+
     &:hover,
     &:focus {
-      color: $white;
+      color: $red;
     }
   }
+
   form {
     background-color: $grey;
   }
   footer {
     border-color: $grey2;
   }
+
+  .desktop-header {
+    background-color: $red;
+    color: $white;
+
+    &:hover {
+      background-color: $black;
+      fill: $black;
+    }
+  }
+
+  li.mobile-links {
+   font-weight: bold; 
+  }  
 }
 
 .banner {

diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -1,8 +1,8 @@
 $red: #d72b2b;
 $black: #000;
 $white: #fff;
-$grey: #222;
-$grey2: #444;
+$grey: #2E2E2E;
+$grey2: #191919;
 $grey3: #f6f6f6;
 $tablet-width: 760px;
 $mobile-width: 420px;