dark theme

likeich · Sep 17, 2024 · d065e2a · d065e2a
1 parent c8e7668
commit d065e2a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 27 deletions.
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -3,15 +3,15 @@
 //
 
 // Colors
-$blue: #4183c4;
+$primary: #1e70b8; // A darker shade of blue
 
 // Grays
-$black: #000;
-$darkerGray: #222;
-$darkGray: #333;
-$gray: #666;
-$lightGray: #eee;
-$white: #fff;
+$textColor: #ddd; // Light gray for text
+$headingColor: #f0f0f0; // Almost white for headings
+$primaryTextColor: #e0e0e0; // Slightly darker for primary text
+$secondaryTextColor: #999; // Lighter gray for secondary text
+$lightBackground: #444; // Dark gray for light backgrounds
+$background: #222; // Dark background
 
 // Font stacks
 $helvetica: Helvetica, Arial, sans-serif;

diff --git a/style.scss b/style.scss
@@ -18,9 +18,9 @@ html {
 }
 
 body {
-    background: $white;
+    background: $background;
     font: 18px/1.4 $helvetica;
-    color: $darkGray;
+    color: $primaryTextColor;
 }
 
 .container {
@@ -37,7 +37,7 @@ h4,
 h5,
 h6 {
     font-family: $helveticaNeue;
-    color: $darkerGray;
+    color: $headingColor;
     font-weight: bold;
 
     line-height: 1.7;
@@ -66,20 +66,20 @@ h3 {
 
 h4 {
     font-size: 18px;
-    color: $gray;
+    color: $secondaryTextColor;
 }
 
 p {
     margin: 15px 0;
 }
 
 a {
-    color: $blue;
+    color: $primary;
     text-decoration: none;
     cursor: pointer;
     &:hover,
     &:active {
-        color: $blue;
+        color: $primary;
     }
 }
 
@@ -130,17 +130,17 @@ img {
 
 .date {
     font-style: italic;
-    color: $gray;
+    color: $secondaryTextColor;
 }
 
 // Specify the color of the selection
 ::-moz-selection {
-    color: $black;
-    background: $lightGray;
+    color: $textColor;
+    background: $lightBackground;
 }
 ::selection {
-    color: $black;
-    background: $lightGray;
+    color: $textColor;
+    background: $lightBackground;
 }
 
 // Nicolas Gallagher's micro clearfix hack
@@ -169,7 +169,7 @@ img {
 
 .masthead {
     padding: 20px 0;
-    border-bottom: 1px solid $lightGray;
+    border-bottom: 1px solid $lightBackground;
 
     @include mobile {
         text-align: center;
@@ -205,7 +205,7 @@ img {
 
 .site-name {
     margin: 0;
-    color: $darkGray;
+    color: $primaryTextColor;
     cursor: pointer;
     font-family: $helveticaNeue;
     font-weight: 300;
@@ -215,7 +215,7 @@ img {
 
 .site-description {
     margin: -5px 0 0 0;
-    color: $gray;
+    color: $secondaryTextColor;
     font-size: 16px;
 
     @include mobile {
@@ -238,14 +238,14 @@ nav {
 
     a {
         margin-left: 20px;
-        color: $darkGray;
+        color: $primaryTextColor;
         text-align: right;
         font-weight: 300;
         letter-spacing: 1px;
 
         @include mobile {
             margin: 0 10px;
-            color: $blue;
+            color: $primary;
         }
     }
 }
@@ -256,7 +256,7 @@ nav {
 
 .posts > .post {
     padding-bottom: 2em;
-    border-bottom: 1px solid $lightGray;
+    border-bottom: 1px solid $lightBackground;
 }
 
 .posts > .post:last-child {
@@ -267,9 +267,9 @@ nav {
 .post {
     blockquote {
         margin: 1.8em 0.8em;
-        border-left: 2px solid $gray;
+        border-left: 2px solid $secondaryTextColor;
         padding: 0.1em 1em;
-        color: $gray;
+        color: $secondaryTextColor;
         font-size: 22px;
         font-style: italic;
     }
@@ -288,7 +288,7 @@ nav {
     margin-top: 50px;
     border-top: 1px solid #ddd;
     border-bottom: 1px solid #ddd;
-    background-color: $lightGray;
+    background-color: $lightBackground;
 }
 
 footer {