WIP: dark模式适配

xzxldl55 · Nov 28, 2024 · c733ae2 · c733ae2
1 parent 6a45d87
commit c733ae2
Show file tree

Hide file tree

Showing 10 changed files with 1,055 additions and 1,351 deletions.
diff --git a/package.json b/package.json
@@ -10,11 +10,13 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
     "@types/lodash-es": "^4.17.7",
+    "@vueuse/core": "^11.3.0",
     "element-plus": "^2.3.1",
     "lodash-es": "^4.17.21",
     "vue": "^3.2.47"
   },
   "devDependencies": {
+    "@types/node": "^22.10.0",
     "@vitejs/plugin-vue": "^4.1.0",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.21",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.vue b/src/App.vue
@@ -1,23 +1,30 @@
 <template>
-    <div class="w-screen h-screen flex flex-col">
-        <header
-            class="flex-shrink-0 h-16 bg-white px-6 flex justify-between items-center"
-        >
-            <p class="text-black text-xl font-bold">动态主题色方案</p>
-            <el-button type="primary" :icon="Operation" circle @click="settingsModalRef?.openModal()" />
-            <settings-modal ref="settingsModalRef" />
-        </header>
-        <article class="flex-1 overflow-y-auto p-6">
-            <element-box />
-        </article>
-        <footer class="flex-shrink-0 h-40 p-6 bg-black">
-            <span
-                class="bg-gradient-to-r from-primary-lighter to-primary-deeper bg-clip-text text-transparent text-3xl font-bold"
-            >
-                我只是个渐变色
-            </span>
-        </footer>
-    </div>
+  <div class="w-screen h-screen flex flex-col">
+    <header
+      class="flex-shrink-0 h-16 bg-white px-6 flex justify-between items-center"
+    >
+      <p class="text-black text-xl font-bold">动态主题色方案</p>
+      <el-button
+        type="primary"
+        :icon="Operation"
+        circle
+        @click="settingsModalRef?.openModal()"
+      />
+      <settings-modal ref="settingsModalRef" />
+    </header>
+    <article
+      :class="`flex-1 overflow-y-auto p-6`"
+    >
+      <element-box />
+    </article>
+    <footer class="flex-shrink-0 h-40 p-6 bg-black">
+      <span
+        class="bg-gradient-to-r from-primary-lighter to-primary-deeper bg-clip-text text-transparent text-3xl font-bold"
+      >
+        我只是个渐变色
+      </span>
+    </footer>
+  </div>
 </template>
 
 <script setup lang="ts">

diff --git a/src/assets/style.scss b/src/assets/style.scss
@@ -7,5 +7,5 @@
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   font-size: 16px;
-  background-color: var(--info-light-color);
-}
+  background-color: var(--el-color-bg);
+}
diff --git a/src/assets/theme.scss b/src/assets/theme.scss
@@ -0,0 +1,7 @@
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': green,
+    ),
+  ),
+);
diff --git a/src/components/settings-modal.vue b/src/components/settings-modal.vue
@@ -1,46 +1,55 @@
 <template>
-    <el-dialog
-        v-model="dialogVisible"
-        title="主题配置"
-        width="640px"
-        draggable
-        :close-on-click-modal="false"
-    >
-        <el-form label-position="left" :label-width="80">
-            <el-form-item label="主色：">
-                <el-color-picker v-model="themeConfig.colors.primary" />
-            </el-form-item>
-            <el-form-item label="消息色：">
-                <el-color-picker v-model="themeConfig.colors.info" />
-            </el-form-item>
-            <el-form-item label="成功色：">
-                <el-color-picker v-model="themeConfig.colors.success" />
-            </el-form-item>
-            <el-form-item label="警告色：">
-                <el-color-picker v-model="themeConfig.colors.warning" />
-            </el-form-item>
-            <el-form-item label="危险色：">
-                <el-color-picker v-model="themeConfig.colors.danger" />
-            </el-form-item>
-            <el-button type="primary" @click="updateTheme">适用配置</el-button>
-        </el-form>
-    </el-dialog>
+  <el-dialog
+    v-model="dialogVisible"
+    title="主题配置"
+    width="640px"
+    draggable
+    :close-on-click-modal="false"
+  >
+    <el-form label-position="left" :label-width="80">
+      <el-form-item label="暗黑模式">
+        <el-switch @click="toggleDark()" :value="isDark" />
+      </el-form-item>
+      <el-form-item label="主色：">
+        <el-color-picker v-model="themeConfig.colors.primary" />
+      </el-form-item>
+      <el-form-item label="消息色：">
+        <el-color-picker v-model="themeConfig.colors.info" />
+      </el-form-item>
+      <el-form-item label="成功色：">
+        <el-color-picker v-model="themeConfig.colors.success" />
+      </el-form-item>
+      <el-form-item label="警告色：">
+        <el-color-picker v-model="themeConfig.colors.warning" />
+      </el-form-item>
+      <el-form-item label="危险色：">
+        <el-color-picker v-model="themeConfig.colors.danger" />
+      </el-form-item>
+      <el-button type="primary" @click="updateTheme">适用配置</el-button>
+    </el-form>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { Theme, getTheme, setTheme } from '../utils/theme';
+import { AnyFn, useDark, useToggle } from '@vueuse/core';
+
+const isDark = useDark();
+const toggleDark = useToggle(isDark) as unknown as AnyFn;
 
 const dialogVisible = ref(false);
 
 const themeConfig = ref<Theme>(Object.assign({}, getTheme()));
 
 const updateTheme = () => setTheme(themeConfig.value);
 
+watch(isDark, updateTheme);
+
 defineExpose({
-    openModal() {
-        dialogVisible.value = true;
-    },
+  openModal() {
+    dialogVisible.value = true;
+  },
 });
 </script>
 

diff --git a/src/main.ts b/src/main.ts
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import './assets/style.scss'
 import App from './App.vue'
 import { setTheme } from './utils/theme';
+import 'element-plus/theme-chalk/dark/css-vars.css'
 
 setTheme();