Dark mode

artchen · May 5, 2020 · 2bf5b20 · 2bf5b20
1 parent c38ef80
commit 2bf5b20
Show file tree

Hide file tree

Showing 14 changed files with 272 additions and 170 deletions.
diff --git a/layout/archive.ejs b/layout/archive.ejs
@@ -18,7 +18,7 @@
                         year = post.year;
             %>
             <h3 class="archive-item archive-year">
-                <a id="archive-year-<%= year %>" href="<%= url_for("/") %>/archives/<%= year %>/">
+                <a id="archive-year-<%= year %>" href="<%= url_for("/archives") %>/<%= year %>/">
                     <%= year %>
                 </a>
             </h3>
@@ -50,6 +50,4 @@
         </nav>
     <% } %>
 
-    <%- partial('_partial/ad-article') %>
-
 <% } %>
diff --git a/source/style.scss b/source/style.scss
@@ -8,9 +8,9 @@
 @import "style/header";
 @import "style/footer";
 @import "style/sidebar";
-@import "style/main";
-@import "style/archive";
 @import "style/content";
+@import "style/post";
+@import "style/archive";
 @import "style/pagination";
 
 @import "style/search";
diff --git a/source/style/archive.scss b/source/style/archive.scss
@@ -16,9 +16,17 @@
         background: transparent;
         transition: all ease 0.24s;
 
+        @media (prefers-color-scheme: dark) {
+          color: $dark-mode-text-color;
+        }
         &:hover {
-          border-left-color: lighten($accent-color,10%);
-          background: lighten($background-color,2%);
+          border-left-color: lighten($brand-color, 10%);
+          background-color: lighten($background-color, 2%);
+
+          @media (prefers-color-scheme: dark) {
+            border-left-color: lighten($dark-mode-brand-color, 10%);
+            background-color: darken($dark-mode-light-background, 5%);
+          }
         }
       }
     }
@@ -33,7 +41,11 @@
       }
       .title {
         font-size: 14px;
-        color: $accent-color;
+        color: $brand-color;
+
+        @media (prefers-color-scheme: dark) {
+          color: $dark-mode-brand-color;
+        }
       }
     }
   }

diff --git a/source/style/base.scss b/source/style/base.scss
@@ -7,13 +7,10 @@
   padding: 0;
 }
 
-/* My Base */
-
 html {
   width: 100%;
   height: 100%;
   font-size: 62.5%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 body {
@@ -24,7 +21,7 @@ body {
   line-height: 1.5em;
   color: $text-color;
   text-rendering: geometricPrecision;
-  background-color: $background-color;
+  background-color: transparent;
 
   &.modal-active {
     overflow: hidden;
@@ -52,13 +49,13 @@ body {
 }
 
 ::-moz-selection {
-  background: fade(lighten($material-orange, 15%), 70%);
-  color: $black;
+  background: rgba(lighten($material-orange, 15%), 70%);
+  color: darken($text-color, 20%);
 }
 
 ::selection {
-  background: fade(lighten($material-orange, 15%), 70%);
-  color: $black;
+  background: rgba(lighten($material-orange, 15%), 70%);
+  color: darken($text-color, 20%);
 }
 
 h1, h2, h3,
@@ -95,7 +92,7 @@ h6 {
 }
 
 a {
-  color: $black;
+  color: $text-color;
   text-decoration: none;
   transition: all 0.24s ease;
 
@@ -109,37 +106,50 @@ pre {
 
   code {
     display: block;
-    background: white;
-    color: #4d4d4c;
     line-height: 1.5;
     border: 1px solid #ccc;
+    background-color: white;
+    color: #4d4d4c;
     padding: 10px;
   }
 }
 
 ::-webkit-input-placeholder {
   color: lighten($grey-color, 20%);
   font-weight: normal;
+
+  @media (prefers-color-scheme: dark) {
+    color: darken($dark-mode-text-color, 20%);
+  }
 }
 
 :-moz-placeholder { /* Firefox 18- */
   color: lighten($grey-color, 20%);
   font-weight: normal;
+
+  @media (prefers-color-scheme: dark) {
+    color: darken($dark-mode-text-color, 20%);
+  }
 }
 
 ::-moz-placeholder {  /* Firefox 19+ */
   color: lighten($grey-color, 20%);
   font-weight: normal;
+
+  @media (prefers-color-scheme: dark) {
+    color: darken($dark-mode-text-color, 20%);
+  }
 }
 
 :-ms-input-placeholder {
   color: lighten($grey-color, 20%);
   font-weight: normal;
+
+  @media (prefers-color-scheme: dark) {
+    color: darken($dark-mode-text-color, 20%);
+  }
 }
 
-/**
- *  Util
- */
 .clearfix {
   zoom: 1;
 
@@ -189,6 +199,10 @@ pre {
   transition: all 0.24s ease;
   z-index: 10;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: $dark-mode-background;
+  }
+
   .overlay {
     position: absolute;
     top: 0;
@@ -197,7 +211,7 @@ pre {
     height: 100%;
     content: "";
     opacity: 0;
-    background-color: fade($white, 50%);
+    background-color: rgba($black, 0.3);
     transition: all 0.24s ease;
     visibility: hidden;
     z-index: 9999;

diff --git a/source/style/button.scss b/source/style/button.scss
@@ -2,17 +2,26 @@
 
 .dark-btn {
   display: inline-block;
-  background: rgba(0,0,0,0.3);
-  border: 1px solid black;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid $black;
   padding: 0 15px;
   font-size: 13px;
   font-family: $base-font-family;
   text-align: center;
   color: lighten(#8f8f8f, 20%);
 
+  @media (prefers-color-scheme: dark) {
+    color: $dark-mode-text-color;
+  }
+
   &:hover {
-    color: lighten(#8f8f8f, 40%);
+    color: darken($text-color, 10%);
     background-color: $brand-color;
+
+    @media (prefers-color-scheme: dark) {
+      color: darken($dark-mode-text-color, 60%);
+      background-color: $dark-mode-brand-color;
+    }
   }
   .icon {
     margin-right: 5px;