feat: 深色模式

src/cpns/ClipFullData.vue

@@ -31,5 +31,5 @@ const onOverlayClick = () => emit('onOverlayClick')
 </script>
 
 <style lang="less" scoped>
-@import '../style/cpns/clip-full-data.less';
+@import '../style';
 </style>

src/cpns/ClipItemList.vue

@@ -56,5 +56,5 @@ const onDataChange = (item) => {
 </script>
 
 <style lang="less" scoped>
-@import '../style/cpns/clip-item-list.less';
+@import '../style';
 </style>

src/cpns/ClipSearch.vue

@@ -18,5 +18,5 @@ watch(filterText, (val) => emit('update:modelValue', val))
 </script>
 
 <style lang="less" scoped>
-@import '../style/cpns/clip-search.less';
+@import '../style';
 </style>

src/cpns/ClipSwitch.vue

@@ -38,5 +38,5 @@ defineExpose({
 </script>
 
 <style lang="less" scoped>
-@import '../style/cpns/clip-switch.less';
+@import '../style';
 </style>

src/cpns/FileList.vue

@@ -19,5 +19,5 @@ const getIcon = (path) => window.getIcon(path)
 </script>
 
 <style lang="less" scoped>
-@import '../style/cpns/file-list.less';
+@import '../style';
 </style>

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

src/style/index.less

@@ -0,0 +1,37 @@
+.import() {
+  @import (multiple) './cpns/clip-full-data.less';
+  @import (multiple) './cpns/clip-item-list.less';
+  @import (multiple) './cpns/clip-search.less';
+  @import (multiple) './cpns/clip-switch.less';
+  @import (multiple) './cpns/file-list.less';
+}
+
+@media (prefers-color-scheme: dark) {
+  #app {
+    @primary-color: #8a2be2;
+    @primary-color-lighter: #d3b8ec;
+    @text-color: #e8e6e3;
+    @text-color-lighter: rgb(207, 207, 207);
+    @text-bg-color: #7f7c83;
+    @text-bg-color-lighter: #4e4e4e;
+    @nav-bg-color: #222426;
+    @nav-hover-bg-color: #2b2e30;
+    @bg-color: #181a1b;
+    .import();
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  #app {
+    @primary-color: #8a2be2;
+    @primary-color-lighter: #d3b8ec;
+    @text-color: #333;
+    @text-color-lighter: rgb(138, 138, 138);
+    @text-bg-color: #e3d9ec;
+    @text-bg-color-lighter: #eeeaf3;
+    @nav-bg-color: #eeeeee;
+    @nav-hover-bg-color: #dedede;
+    @bg-color: #fff;
+    .import();
+  }
+}

src/style/variable.less

@@ -1,6 +0,0 @@
-@primary-color: #8a2be2;
-@primary-color-lighter: #d3b8ec;
-@text-color: #333;
-@text-color-lighter: rgb(138, 138, 138);
-@text-bg-color: #e3d9ec;
-@text-bg-color-lighter: #eeeaf3;

src/views/Main.vue

@@ -152,7 +152,7 @@ onMounted(() => {
 </script>
 
 <style lang="less" scoped>
-@import '../style/variable.less';
+@import '../style';
 .clip-restore {
   display: flex;
   justify-content: center;
@@ -168,7 +168,7 @@ onMounted(() => {
   background-color: rgb(232, 232, 232);
   user-select: none;
   &:hover {
-    background-color: @primary-color;
+    // background-color: @primary-color;
     transition: all 0.15s;
   }
 }