feat:增加主题模式切换

src/styles/blog/blog.archive.module.scss

@@ -38,7 +38,7 @@
       }
 
       .title:hover {
-        color: blog.$hover-text-color;
+        color: var(--color-text);
       }
     }
   }

src/styles/blog/blog.category.detail.module.scss

@@ -22,7 +22,7 @@
 
     .item {
       display: grid;
-      grid-template-columns: 40px 150px 1fr;
+      grid-template-columns: 40px 200px 1fr;
       justify-items: center;
       align-items: center;
       gap: 10px;
@@ -47,7 +47,7 @@
     }
 
     .item:hover {
-      color: blog.$hover-text-color;
+      color: var(--color-text);
     }
   }
 }

src/styles/blog/blog.category.module.scss

@@ -26,6 +26,7 @@
       gap: 5px;
       padding-bottom: 5px;
       border-bottom: 1px dashed blog.$gray-text-color;
+      color: blog.$normal-text-color;
 
       i {
         font-size:28px;
@@ -53,6 +54,11 @@
         }
       }
     }
+
+    .item:hover {
+      color: var(--color-text);
+      cursor: pointer;
+    }
   }
 }
 

src/styles/blog/blog.detail.module.scss

@@ -12,9 +12,7 @@
   .blog-md {
     height: 100%;
     width: 100%;
-    padding: 1vh 1vw;
-    border-radius: 10px;
-    box-shadow: 0 0 5px blog.$border-color;
+    padding: 10px;
     overflow: auto;
 
     .md-editor {
@@ -43,11 +41,11 @@
 
 .blog-copyright {
   width: 100%;
-  background-color: #F8F8F8;
-  padding: 1vh 1vw;
+  background-color: var(--color-copyright-bg);
+
+  padding: 10px;
   border-left: 3px solid #FD2C17;
   font-size:  blog.$small-font-size;
-  color: #666666;
 
   display: flex;
   flex-direction: column;

src/styles/blog/blog.footbar.module.scss

@@ -1,13 +1,13 @@
 @use "blog.variable.module.scss" as blog;
 
 .blog-site-footer {
-  padding: 1vh 0;
+  padding: 10px 0;
 
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 1vh;
+  gap: 10px;
 
   span {
     font-size: blog.$small-font-size;

src/styles/blog/blog.module.scss

@@ -2,7 +2,7 @@
 
 .blog-container {
   // height: 100%;
-  background-color: blog.$bg-color;
+  background-color: var(--color-bg);
   padding: 0 5vw;
 
   display: grid;
@@ -32,9 +32,6 @@
     .blog-section {
       // height: 100%;
       min-height: 100vh;
-      background-color: blog.$card-bg-color;
-      border: 1px solid blog.$border-color;
-      border-radius: blog.$border-radius;
       box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12),
                   0 3px 1px -2px rgba(0,0,0,0.06),
                   0 1px 5px 0 rgba(0,0,0,0.12),
@@ -52,14 +49,11 @@
     }
   }
 
-  .card-container {
-    background-color: blog.$card-bg-color;
-    border: 1px solid blog.$border-color;
+  .card-item {
+    background-color: var(--color-card-bg);
+    border: 1px solid var(--color-border-bg);
     border-radius: blog.$border-radius;
-    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12),
-                0 3px 1px -2px rgba(0,0,0,0.06),
-                0 1px 5px 0 rgba(0,0,0,0.12),
-                0 -1px 0.5px 0 rgba(0,0,0,0.09);
+    // box-shadow: 3px 3px 3px #CFCFCF;
   }
 }
 

src/styles/blog/blog.sidebar.module.scss

@@ -61,7 +61,7 @@ $sub-title-font-size: 1rem;
           border: solid 1px blog.$normal-bg-color;
           border-radius: 15px;
 
-          color: white;
+          color: var(--color-bg);
           font-size: blog.$small-font-size;
           font-family: "Times New Roman",serif;
         }
@@ -74,7 +74,6 @@ $sub-title-font-size: 1rem;
   }
 
   .blog-summary {
-    // padding: 2vh 1vw;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -157,7 +156,7 @@ $sub-title-font-size: 1rem;
           }
 
           .name:hover {
-            color: blog.$hover-text-color;
+            color: var(--color-text);
           }
         }
       }
@@ -184,8 +183,8 @@ $sub-title-font-size: 1rem;
         }
 
         .item:hover {
-          background-color: blog.$hover-bg-color;
-          color: blog.$hover-text-color;
+          background-color: var(--color-card-bg);
+          color: var(--color-text);
         }
       }
 
@@ -226,7 +225,7 @@ $sub-title-font-size: 1rem;
           }
 
           span:hover {
-            color: blog.$hover-text-color;
+            color: var(--color-text);
           }
         }
       }
@@ -260,7 +259,7 @@ $sub-title-font-size: 1rem;
       border-color: blog.$border-color;
       border-bottom-left-radius: blog.$border-radius;
       border-bottom-right-radius: blog.$border-radius;
-      background-color: #F8F9FA;
+      background-color: var(--color-scroll-card-bg);
 
       text-align: center;
 

src/styles/blog/blog.tools.module.scss

@@ -0,0 +1,129 @@
+@use "blog.variable.module.scss" as blog;
+
+.blog-tools {
+  position: absolute;
+
+  .book-mark-link {
+    border-bottom: none;
+    display: block;
+    position: fixed;
+    top: -2px;
+    left: 20px;
+    color: #222;
+    font-size: 26px;
+    transition: .3s;
+    z-index: 2;
+  }
+
+  .github-corner {
+    border-bottom: none;
+    display: block;
+    position: fixed;
+    top: 0;
+    right: 0;
+    color: #222;
+    font-size: 26px;
+    transition: .3s;
+    z-index: 2;
+  }
+
+  .github-corner:hover .octo-arm {
+    animation: octocat-wave 560ms ease-in-out
+  }
+
+  @keyframes octocat-wave {
+    0%, 100% {
+      transform: rotate(0)
+    }
+    20%, 60% {
+      transform: rotate(-25deg)
+    }
+    40%, 80% {
+      transform: rotate(10deg)
+    }
+  }
+
+  @media (max-width: 500px) {
+    .github-corner:hover .octo-arm {
+      animation: none
+    }
+    .github-corner .octo-arm {
+      animation: octocat-wave 560ms ease-in-out
+    }
+  }
+
+  #particles {
+    position: absolute;
+    z-index: 0;
+  }
+
+  .heart {
+    position: fixed;
+    opacity: 1;
+    scale: 1;
+    width: 10px;
+    height: 10px;
+    background: red;
+    transform: rotate(45deg);
+    z-index: 2;
+  }
+
+  .heart:after, .heart:before {
+    content: "";
+    width: inherit;
+    height: inherit;
+    background: inherit;
+    border-radius: 50%;
+    position: absolute;
+  }
+
+  .heart:after {
+    top: -5px;
+  }
+
+  .heart:before {
+    left: -5px;
+  }
+
+  @keyframes move {
+    100% {
+      transform: translateY(-20px) rotate(45deg);
+      opacity: 0;
+    }
+  }
+
+  .blog-progress {
+    /* Positioning */
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 3px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: none;
+    background-color: transparent;
+    color: blog.$theme-color;
+    z-index: 3;
+  }
+
+  .blog-progress::-webkit-progress-bar {
+    background-color: transparent;
+  }
+
+  .blog-progress::-webkit-progress-value {
+    background-color: blog.$theme-color;
+  }
+
+  .blog-progress::-moz-progress-bar {
+    background-color: blog.$theme-color;
+  }
+
+  .theme-button {
+    position: fixed;
+    top: -2px;
+    left: 50px;
+    z-index: 10;
+  }
+}

src/styles/index.module.scss

@@ -47,8 +47,9 @@ span, input {
   // 基础颜色
   --color-bg: #F5F5F5;
   --color-card-bg: #FFFFFF;
-  --color-record-card-bg: #F5F5DC;
-  --color-border-bg: #FFFFFF;
+  --color-scroll-card-bg: #F8F9FA;
+  --color-copyright-bg: #F8F8F8;
+  --color-border-bg: #F5F5F5;
   --color-text: #000000;
 }
 
@@ -56,7 +57,8 @@ span, input {
 .dark {
   --color-bg: #000000;
   --color-card-bg: #000000;
-  --color-record-card-bg: #4C4D4F;
+  --color-scroll-card-bg: #4C4D4F;
+  --color-copyright-bg: #4C4D4F;
   --color-border-bg: #4C4D4F;
   --color-text: #FFFFFF;
 }