fix: dark mode

Author: reco_luan

components/DropdownLink.vue

@@ -161,7 +161,7 @@ export default {
       // make the arrow always down at desktop
       border-left 4px solid transparent
       border-right 4px solid transparent
-      border-top 6px solid $textColorSub
+      border-top 6px solid var(--text-color-sub)
       border-bottom 0
     .nav-dropdown
       display none

components/Mode/modeOptions.js

@@ -10,10 +10,11 @@ const modeOptions = {
     '--default-color-3': 'rgba(255, 255, 255, .3)',
     '--default-color-2': 'rgba(255, 255, 255, .2)',
     '--default-color-1': 'rgba(255, 255, 255, .1)',
-    '--background-color': '#fff',
+    '--background-color': '#F5F5F5',
     '--box-shadow': '0 1px 6px 0 rgba(0, 0, 0, 0.2)',
     '--box-shadow-hover': '0 2px 16px 0 rgba(0, 0, 0, 0.2)',
-    '--text-color': '#2c3e50',
+    '--text-color': '#242424',
+    '--text-color-sub': '#7F7F7F',
     '--border-color': '#eaecef',
     '--code-color': 'rgba(27, 31, 35, 0.05)',
     '--mask-color': '#888'
@@ -29,10 +30,11 @@ const modeOptions = {
     '--default-color-3': 'rgba(0, 0, 0, .3)',
     '--default-color-2': 'rgba(0, 0, 0, .2)',
     '--default-color-1': 'rgba(0, 0, 0, .1)',
-    '--background-color': '#202124',
+    '--background-color': '#181818',
     '--box-shadow': '0 1px 6px 0 rgba(0, 0, 0, .9)',
     '--box-shadow-hover': '0 2px 26px 0 rgba(0, 0, 0, .9)',
-    '--text-color': '#fff',
+    '--text-color': '#E8E8E8',
+    '--text-color-sub': '#8B8B8B',
     '--border-color': 'rgba(0, 0, 0, .3)',
     '--code-color': 'rgba(0, 0, 0, .3)',
     '--mask-color': '#000'

components/Mode/setMode.js

@@ -29,7 +29,7 @@ export default function setMode () {
     console.log('You specified no preference for a color scheme or your browser does not support it. I schedule dark mode during night time.')
     const now = new Date()
     const hour = now.getHours()
-    if (hour < 4 || hour >= 16) {
+    if (hour < 6 || hour >= 18) {
       activateMode('dark')
     }
   }

layouts/TimeLines.vue

@@ -124,7 +124,7 @@ export default {
       .date {
         width 40px
         line-height 30px
-        color $textColorSub
+        color var(--text-color-sub)
         font-size 12px
         &::before {
           content: " ";
@@ -142,7 +142,7 @@ export default {
       }
       .title {
         line-height 30px
-        color $textColorSub
+        color var(--text-color-sub)
         font-size 16px
         cursor pointer
       }

styles/arrow.styl

@@ -7,16 +7,16 @@
   &.up
     border-left 4px solid transparent
     border-right 4px solid transparent
-    border-bottom 6px solid $textColorSub
+    border-bottom 6px solid var(--text-color-sub)
   &.down
     border-left 4px solid transparent
     border-right 4px solid transparent
-    border-top 6px solid $textColorSub
+    border-top 6px solid var(--text-color-sub)
   &.right
     border-top 4px solid transparent
     border-bottom 4px solid transparent
-    border-left 6px solid $textColorSub
+    border-left 6px solid var(--text-color-sub)
   &.left
     border-top 4px solid transparent
     border-bottom 4px solid transparent
-    border-right 6px solid $textColorSub
+    border-right 6px solid var(--text-color-sub)

styles/mode.styl

@@ -13,6 +13,7 @@
   --box-shadow $boxShadow
   --box-shadow-hover $boxShadowHover
   --text-color $textColor
+  --text-color-sub $textColorSub
   --border-color $borderColor
   --code-color $codeColor
   --mask-color $maskColor
@@ -31,6 +32,7 @@
     --box-shadow $boxShadowDark
     --box-shadow-hover $boxShadowHoverDark
     --text-color $textColorDark
+    --text-color-sub $textColorSubDark
     --border-color $borderColorDark
     --code-color $codeColorDark
     --mask-color $maskColorDark

styles/palette.styl

@@ -23,18 +23,19 @@ $lightColor1 = rgba(255, 255, 255, .1)
 $textShadow = 0 2px 4px $darkColor1;
 $borderRadius = .25rem
 $lineNumbersWrapperWidth = 2.5rem
-$textColorSub = #888
 
-$backgroundColor ?= #fff
-$backgroundColorDark ?= #202124
+$backgroundColor ?= #F5F5F5
+$backgroundColorDark ?= #181818
 
 $boxShadow = 0 1px 6px 0 $darkColor2
 $boxShadowHover = 0 2px 16px 0 $darkColor2
 $boxShadowDark = 0 1px 6px 0 $darkColor6
 $boxShadowHoverDark = 0 2px 16px 0 $darkColor6
 
-$textColor ?= #2c3e50
-$textColorDark ?= #fff
+$textColor ?= #242424
+$textColorDark ?= #E8E8E8
+$textColorSub = #7F7F7F
+$textColorSubDark = #8B8B8B
 
 $borderColor ?= #eaecef
 $borderColorDark ?= $darkColor3

styles/palette2.styl

@@ -188,7 +188,7 @@ th, td
 
 .iconfont
   font-size: 0.9rem;
-  color: $textColorSub;
+  color: var(--text-color-sub);
 
 /************** 滚动条 **************/
 ::-webkit-scrollbar