feat: add dark mode(part.2)

Author: reco_luan

components/Mode/index.vue

@@ -62,22 +62,10 @@ export default {
 		left: 50%;
 		transform: translateX(-50%);
 		z-index: 150;
-		&::before {
-			content: '';
-			position: absolute;
-			top: -7px;
-			left: 50%;
-			border-style: solid;
-			border-color: transparent transparent $borderColor;
-			border-width: 0 7px 7px;
-			transform: translateX(-50%);
-		}
-
 		&.menu-transition-enter-active,
 		&.menu-transition-leave-active {
 			transition: all 0.25s ease-in-out;
 		}
-
 		&.menu-transition-enter,
 		&.menu-transition-leave-to {
 			top: 50px;
@@ -92,17 +80,6 @@ export default {
 	}
 }
 
-.reco-mode-dark {
-	.color-picker-menu {
-		background-color: $darkPrimaryBg;
-		border-color: $darkBorderColor;
-
-		&::before {
-			border-bottom-color: $darkBorderColor;
-		}
-	}
-}
-
 @media (max-width: $MQMobile) {
 	.color-picker {
 		margin-right: 1rem;

layouts/TimeLines.vue

@@ -119,7 +119,7 @@ export default {
     margin-left: -2px;
     width: 4px;
     height: 100%;
-    background: #f5f5f5;
+    background: var(--border-color);
   }
   .desc, .year {
     position: relative;
@@ -135,7 +135,8 @@ export default {
       margin-top: -4px;
       width: 8px;
       height: 8px;
-      background: #ddd;
+      background: var(--background-color);
+      border: 1px solid var(--border-color);
       border-radius: 50%;
     }
   }
@@ -151,7 +152,7 @@ export default {
       display flex
       padding 30px 0 10px
       list-style none
-      border-bottom: 1px dashed #ccc;
+      border-bottom: 1px dashed var(--border-color);
       position relative
       &:hover {
         .date {
@@ -177,9 +178,9 @@ export default {
           width: 6px;
           height: 6px;
           margin-left: -4px;
-          background: #ddd;
+          background: var(--background-color);
           border-radius: 50%;
-          border: 1px solid #fff;
+          border: 1px solid var(--border-color);
           z-index 2
         }
       }

styles/theme.styl

@@ -43,7 +43,7 @@ body
 
 .sidebar
   font-size 16px
-  background-color #fff
+  background-color var(--background-color)
   width $sidebarWidth
   position fixed
   z-index 10