feat: 深色模式

src/style/cpns/clip-full-data.less

@@ -4,7 +4,7 @@
   top: 0;
   height: 100%;
   width: 60%;
-  background: white;
+  background: @bg-color;
   padding: 0px 20px 0px 20px;
   overflow-y: scroll;
   word-break: break-all;

src/style/cpns/clip-item-list.less

@@ -1,76 +1,79 @@
-@import '../variable.less';
-.clip-item {
-  display: flex;
-  justify-content: space-between;
-  border: 0px solid #eee;
-  border-width: 0px 0px 1px 0px;
-  cursor: pointer;
-  &:hover {
-    background-color: @text-bg-color-lighter;
-    transition: all 0.15s;
-  }
-  .clip-info {
+.clip-item-list {
+  background: @bg-color;
+  .clip-item {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 14px;
-    padding: 10px;
-    .clip-time {
+    justify-content: space-between;
+    border: 0px solid #eee;
+    border-width: 0px 0px 1px 0px;
+    cursor: pointer;
+    &:hover {
+      background-color: @text-bg-color-lighter;
+      transition: all 0.15s;
+    }
+    .clip-info {
       display: flex;
       justify-content: center;
       align-items: center;
-      min-width: 100px;
-      span {
+      font-size: 14px;
+      padding: 10px;
+      .clip-time {
         display: flex;
         justify-content: center;
         align-items: center;
-        font-size: 13px;
-        color: @text-color-lighter;
-        background-color: @text-bg-color;
-        border-radius: 5px;
-        min-width: 50px;
-        padding: 5px 10px 5px 10px;
+        min-width: 100px;
+        span {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 13px;
+          color: @text-color-lighter;
+          background-color: @text-bg-color;
+          border-radius: 5px;
+          min-width: 50px;
+          padding: 5px 10px 5px 10px;
+        }
       }
-    }
-    .clip-data {
-      display: flex;
-      overflow: hidden;
-      word-break: break-all;
-      max-height: 150px;
-      padding: 5px;
-      white-space: pre-wrap;
-      flex-direction: column;
-      background-color: white;
-      img {
+      .clip-data {
+        display: flex;
+        overflow: hidden;
+        word-break: break-all;
         max-height: 150px;
-      }
-      .clip-image-size {
-        position: absolute;
-        background-color: white;
+        padding: 5px;
+        white-space: pre-wrap;
+        flex-direction: column;
+        color: @text-color;
+        background-color: @bg-color;
+        img {
+          max-height: 150px;
+        }
+        .clip-image-size {
+          position: absolute;
+          background-color: @bg-color;
+        }
       }
     }
-  }
-  .clip-count {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 50px;
-    padding: 10px;
-    font-size: 13px;
-    color: @text-color-lighter;
-    padding: 10px;
-  }
-  .clip-more {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 10px;
-    font-size: 13px;
-    cursor: pointer;
-    border-radius: 0px 5px 5px 0px;
-  }
-  .clip-more:hover {
-    background-color: @text-bg-color;
-    transition: all 0.15s;
+    .clip-count {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 50px;
+      padding: 10px;
+      font-size: 13px;
+      color: @text-color-lighter;
+      padding: 10px;
+    }
+    .clip-more {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px;
+      font-size: 13px;
+      cursor: pointer;
+      border-radius: 0px 5px 5px 0px;
+    }
+    .clip-more:hover {
+      background-color: @text-bg-color;
+      transition: all 0.15s;
+    }
   }
 }

src/style/cpns/clip-search.less

@@ -1,4 +1,3 @@
-@import '../variable.less';
 .clip-search {
   width: 40%;
   margin-right: 30px;
@@ -10,7 +9,7 @@
     border: none;
     /* custom */
     color: @text-color;
-    background-color: white;
+    background-color: @bg-color;
     height: fit-content;
     font-size: 15px;
     padding: 10px;

src/style/cpns/clip-switch.less

@@ -1,4 +1,3 @@
-@import '../variable.less';
 .clip-switch {
   z-index: 999;
   position: fixed;
@@ -8,10 +7,11 @@
   align-items: center;
   flex-direction: row;
   width: 100%;
-  background-color: #eeeeee;
+  color: @text-color;
+  background-color: @nav-bg-color;
   .active {
     color: @primary-color;
-    background-color: white;
+    background-color: @bg-color;
     transition: all 0.15s ease-in-out;
   }
   .clip-switch-items {
@@ -26,7 +26,7 @@
       border-radius: 5px;
       font-size: 14px;
       &:hover {
-        background-color: rgb(222, 222, 222);
+        background-color: @nav-hover-bg-color;
         transition: all 0.15s ease-in-out;
       }
     }