feat: dark mode, version sort

package.json

@@ -4,14 +4,15 @@
   "license": "GPL-3.0-only",
   "author": "MCSLTeam",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@vueuse/core": "^11.1.0",
     "axios": "^1.6.8",
     "js-cookie": "^3.0.5",
     "pinyin": "4.0.0-alpha.2",

src/App.vue

@@ -1,15 +1,30 @@
 <script setup lang="ts">
-import {onMounted, onUnmounted, ref} from "vue";
+import {computed, onMounted, onUnmounted, ref} from "vue";
 import {mainLoadingStatus, statistics} from "./main.ts";
 import Loading from './components/Loading.vue'
 import LoadingStatus from "./utils/enums/LoadingStatus.ts";
 import Error from "./components/Error.vue";
 import router from "./router";
+import {useDarkMode} from "./utils/darkmode.ts";
+
+useDarkMode().loadTheme();
 
 const title = ref();
 const frontendVersion = import.meta.env.PACKAGE_VERSION;
 let interval: number = -1;
 
+const theme = computed(() => {
+  const theme = useDarkMode().value
+  switch (theme) {
+    case 'auto':
+      return '系统';
+    case 'dark':
+      return '深色';
+    default:
+      return '浅色';
+  }
+})
+
 onMounted(() => {
   let titleColor1 = [0x19, 0xE8, 0xA2, 0, 0, 0];
   let titleColor2 = [0x41, 0x99, 0xb7, 0, 0, 0];
@@ -40,6 +55,23 @@ function h2ColorChange(color: number[]) {
   }
 }
 
+function changeTheme(event) {
+  let target
+  switch (useDarkMode().value) {
+    case 'auto':
+      target = 'light';
+      break;
+    case "light":
+      target = 'dark';
+      break;
+    case 'dark':
+    default:
+      target = 'auto';
+      break;
+  }
+  useDarkMode().changeTheme(target, event)
+}
+
 onUnmounted(() => {
   if (interval !== -1)
     clearInterval(interval);
@@ -60,8 +92,11 @@ onUnmounted(() => {
       <a href="https://apidoc.sync.mcsl.com.cn/" target="_blank">访问 API 文档</a>
       <span>&nbsp;|&nbsp;</span>
       <router-link to="/nodes">节点列表</router-link>
+      <span>&nbsp;|&nbsp;</span>
+      <a href="javascript:void(0)" @click="changeTheme">主题：{{ theme }}</a>
       <h6>MCSL-Sync-Frontend v{{ frontendVersion }}<br>MCSL-Sync-Backend&ensp;{{ statistics.version }}</h6>
-      <h5>©2022 - {{ new Date().getFullYear() }} <a href="https://mcsl.com.cn/">MCSL开发组</a> | <a href="https://beian.miit.gov.cn/" target="_blank">鲁ICP备2023001164号-2</a></h5>
+      <h5>©2022 - {{ new Date().getFullYear() }} <a href="https://mcsl.com.cn/">MCSL开发组</a> | <a
+          href="https://beian.miit.gov.cn/" target="_blank">鲁ICP备2023001164号-2</a></h5>
     </div>
     <div class="router-container">
       <router-view/>
@@ -174,11 +209,11 @@ onUnmounted(() => {
   justify-content: center;
   align-items: center;
   height: calc(100% - 5rem);
-  max-height: 32.5rem;
+  max-height: 33rem;
   width: calc(100% - 30rem);
   min-width: 20rem;
   padding: 2rem;
-  background: #ffffff55;
+  background: var(--bg-color-transparent);
   backdrop-filter: blur(5px);
   border-radius: 1.5rem;
   box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
@@ -192,6 +227,10 @@ onUnmounted(() => {
   }
 }
 
+[dark] .router-container {
+  box-shadow: inset 0.1rem 0.1rem 0.2rem rgba(255, 255, 255, 0.05), 0.2rem 0.2rem 0.2rem rgba(255, 255, 255, 0.1);
+}
+
 @media (min-width: 768px) {
   .container-big .title {
     width: 0;

src/components/Back.vue

@@ -23,7 +23,7 @@ defineProps({
   width: 2rem;
   height: 2rem;
   border-radius: 114rem;
-  border: 1px solid #dddddd99;
+  border: 1.5px solid var(--text-color-secondary);
   background: #ffffff00;
   color: var(--text-color-regular);
   transition: ease-in-out 0.3s;
@@ -35,4 +35,8 @@ defineProps({
   border-color: var(--color-primary);
   color: var(--color-primary);
 }
+
+[dark] .back-btn:hover {
+  background: #31323377;
+}
 </style>

src/style.css

@@ -5,6 +5,16 @@
     --text-color-regular: #606266;
     --text-color-secondary: #909399;
     --color-primary: #409eff;
+    --bg-color-transparent: #ffffff55;
+    color-scheme: light;
+}
+
+[dark] {
+    --text-color-primary: #e5eaf3;
+    --text-color-regular: #cfd3dc;
+    --text-color-secondary: #a3a6ad;
+    --bg-color-transparent: #5a5b5c55;
+    color-scheme: dark;
 }
 
 * {
@@ -31,25 +41,32 @@ body {
     justify-content: center;
     align-items: center;
     border: none;
-    background: linear-gradient(135deg, #d9ebff, 5%, #fdfeff);
+    background: linear-gradient(135deg, #d9ebff 5%, #fdfeff);
 }
 
-.el-link {
-    transition: ease-in-out 0.3s;
+[dark] #app {
+    background: linear-gradient(135deg, #08254c, #0a0a0a);
 }
 
-.el-overlay-dialog {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: auto;
+/* 主题切换过渡动画 */
+::view-transition-old(root),
+::view-transition-new(root) {
+    animation: none;
+    mix-blend-mode: normal;
+}
+
+html[dark]::view-transition-old(root) {
+    z-index: 1;
+}
+
+html[dark]::view-transition-new(root) {
+    z-index: 999;
 }
 
-.el-dialog {
-    margin: 0 !important;
-    border-radius: 10px !important;
+::view-transition-old(root) {
+    z-index: 999;
 }
 
-.el-form-item__content {
-    gap: 5px;
+::view-transition-new(root) {
+    z-index: 1;
 }