add dark support

src/App.vue

@@ -1,13 +1,40 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, onMounted } from "vue";
 import { open } from "@tauri-apps/plugin-dialog";
 import { invoke } from "@tauri-apps/api/core";
 import { ElMessage } from 'element-plus';
-import { Document, VideoPlay, CircleCheck } from '@element-plus/icons-vue';
+import { Document, VideoPlay, CircleCheck, Moon, Sunny } from '@element-plus/icons-vue';
 
 // Navigation
 const activeMenu = ref("preparation");
 
+// Theme
+const isDark = ref(false);
+
+const toggleTheme = (val: string | number | boolean) => {
+  // val comes from el-switch change event which is boolean | string | number
+  const isDarkMode = val === true;
+  isDark.value = isDarkMode;
+  if (isDarkMode) {
+    document.documentElement.classList.add('dark');
+    localStorage.setItem('theme', 'dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+    localStorage.setItem('theme', 'light');
+  }
+};
+
+onMounted(() => {
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    isDark.value = true;
+    document.documentElement.classList.add('dark');
+  } else {
+    isDark.value = false;
+    document.documentElement.classList.remove('dark');
+  }
+});
+
 // Preparation Data
 const workingDir = ref("");
 const templateDir = ref("");
@@ -91,7 +118,7 @@ watch(currentDir, (newPath) => {
     const mm = match[1];
     const dd = match[2];
     const year = new Date().getFullYear();
-    // Format: AI-yyyyddmm-
+    // Format: AI-yyyymmdd-
     videoNamePrefix.value = `AI-${year}${mm}${dd}-`;
   }
 });
@@ -100,12 +127,12 @@ watch(currentDir, (newPath) => {
 
 <template>
   <el-container class="layout-container" style="height: 100vh">
-    <el-aside width="200px" style="background-color: #fff; border-right: 1px solid #dcdfe6;">
+    <el-aside width="200px" class="main-aside">
       <el-menu
         :default-active="activeMenu"
         class="el-menu-vertical-demo"
         @select="(index: string) => activeMenu = index"
-        style="border-right: none;"
+        style="border-right: none; flex: 1;"
       >
         <el-menu-item index="preparation">
           <el-icon><Document /></el-icon>
@@ -120,6 +147,16 @@ watch(currentDir, (newPath) => {
           <span>检查</span>
         </el-menu-item>
       </el-menu>
+      
+      <div class="aside-footer">
+         <el-switch
+            v-model="isDark"
+            inline-prompt
+            :active-icon="Moon"
+            :inactive-icon="Sunny"
+            @change="toggleTheme"
+          />
+      </div>
     </el-aside>
 
     <el-main>
@@ -185,7 +222,7 @@ watch(currentDir, (newPath) => {
             </el-form-item>
 
             <el-form-item label="文件前缀">
-              <el-input v-model="videoNamePrefix" placeholder="AI-yyyyddmm-" />
+              <el-input v-model="videoNamePrefix" placeholder="AI-yyyymmdd-" />
             </el-form-item>
           </el-form>
         </el-card>
@@ -209,11 +246,27 @@ watch(currentDir, (newPath) => {
 body {
   margin: 0;
   font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-  background-color: #f0f2f5;
+  background-color: var(--el-bg-color-page);
+  color: var(--el-text-color-primary);
+  transition: background-color 0.3s, color 0.3s;
 }
 .layout-container {
     height: 100vh;
 }
+.main-aside {
+  background-color: var(--el-bg-color);
+  border-right: 1px solid var(--el-border-color);
+  display: flex;
+  flex-direction: column;
+  transition: background-color 0.3s, border-color 0.3s;
+}
+.aside-footer {
+  padding: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top: 1px solid var(--el-border-color);
+}
 .box-card {
   max-width: 800px;
   margin-bottom: 20px;

src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from "vue";
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from "./App.vue";