主题颜色跟随window进行切换

app.vue

@@ -4,4 +4,17 @@
 	</NuxtLayout>
 </template>
 <script setup lang="ts">
+	import { useDark, useToggle, usePreferredDark } from "@vueuse/core";
+	import { isFunction } from "lodash-es";
+	const isDark = usePreferredDark();
+	const darkConfig = useDark({
+		selector: "html",
+		attribute: "class",
+		valueDark: "dark",
+		valueLight: "",
+	});
+	const toggleDark = useToggle(darkConfig);
+	if (isDark && isFunction(toggleDark)) {
+		toggleDark(isDark);
+	}
 </script>

assets/css/main.css

@@ -1,14 +1,14 @@
-@tailwind base;
+/* @tailwind base; */
 
 /*
 	用于进行主题更换，如果要更换elemenet-plus-ui的主题记得加上!important，不然更换会失败
 */
 
-@layer base {
+/* @layer base {
 	html {
 		font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti, "Microsoft YaHei";
 	}
-}
+} */
 
 html,
 body {
@@ -19,11 +19,16 @@ body {
 * {
 	outline: none;
 }
+body {
+	background-color: #fff;
+}
+html.dark body {
+	background-color: #000;
+}
 
 #__easytier {
 	height: 100%;
 	overflow: hidden;
-	background-color: #fff;
 	box-sizing: border-box;
 	padding: 3px 5px;
 }

nuxt.config.ts

@@ -22,7 +22,7 @@ export default defineNuxtConfig({
 		autoImport: false
 	},
 
-	css: ["~/assets/css/main.css"],
+	css: ["~/assets/css/main.css", 'element-plus/theme-chalk/dark/css-vars.css'],
 	modules: ["@element-plus/nuxt", "@pinia/nuxt", "@pinia-plugin-persistedstate/nuxt", "@nuxtjs/tailwindcss"],
 
 	alias: {

package.json

@@ -23,6 +23,7 @@
 		"@types/lodash-es": "^4.17.12",
 		"@types/qs": "^6.9.15",
 		"@vitejs/plugin-vue-jsx": "^3.1.0",
+		"@vueuse/core": "^11.2.0",
 		"dayjs": "^1.11.10",
 		"defu": "^6.1.4",
 		"element-plus": "^2.8.6",

pnpm-lock.yaml

@@ -57,6 +57,9 @@ importers:
       '@vitejs/plugin-vue-jsx':
         specifier: ^3.1.0
         version: 3.1.0(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(terser@5.30.4))(vue@3.4.24(typescript@5.4.5))
+      '@vueuse/core':
+        specifier: ^11.2.0
+        version: 11.2.0(vue@3.4.24(typescript@5.4.5))
       dayjs:
         specifier: ^1.11.10
         version: 1.11.10
@@ -1288,6 +1291,9 @@ packages:
   '@vueuse/core@10.9.0':
     resolution: {integrity: sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==}
 
+  '@vueuse/core@11.2.0':
+    resolution: {integrity: sha512-JIUwRcOqOWzcdu1dGlfW04kaJhW3EXnnjJJfLTtddJanymTL7lF1C0+dVVZ/siLfc73mWn+cGP1PE1PKPruRSA==}
+
   '@vueuse/core@9.13.0':
     resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
 
@@ -1335,12 +1341,18 @@ packages:
   '@vueuse/metadata@10.9.0':
     resolution: {integrity: sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==}
 
+  '@vueuse/metadata@11.2.0':
+    resolution: {integrity: sha512-L0ZmtRmNx+ZW95DmrgD6vn484gSpVeRbgpWevFKXwqqQxW9hnSi2Ppuh2BzMjnbv4aJRiIw8tQatXT9uOB23dQ==}
+
   '@vueuse/metadata@9.13.0':
     resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
 
   '@vueuse/shared@10.9.0':
     resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
 
+  '@vueuse/shared@11.2.0':
+    resolution: {integrity: sha512-VxFjie0EanOudYSgMErxXfq6fo8vhr5ICI+BuE3I9FnX7ePllEsVrRQ7O6Q1TLgApeLuPKcHQxAXpP+KnlrJsg==}
+
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
@@ -4133,6 +4145,17 @@ packages:
   vue-clipboard3@2.0.0:
     resolution: {integrity: sha512-Q9S7dzWGax7LN5iiSPcu/K1GGm2gcBBlYwmMsUc5/16N6w90cbKow3FnPmPs95sungns4yvd9/+JhbAznECS2A==}
 
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-demi@0.14.7:
     resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
     engines: {node: '>=12'}
@@ -5858,6 +5881,16 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/core@11.2.0(vue@3.4.24(typescript@5.4.5))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 11.2.0
+      '@vueuse/shared': 11.2.0(vue@3.4.24(typescript@5.4.5))
+      vue-demi: 0.14.10(vue@3.4.24(typescript@5.4.5))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/core@9.13.0(vue@3.4.24(typescript@5.4.5))':
     dependencies:
       '@types/web-bluetooth': 0.0.16
@@ -5882,6 +5915,8 @@ snapshots:
 
   '@vueuse/metadata@10.9.0': {}
 
+  '@vueuse/metadata@11.2.0': {}
+
   '@vueuse/metadata@9.13.0': {}
 
   '@vueuse/shared@10.9.0(vue@3.4.24(typescript@5.4.5))':
@@ -5891,6 +5926,13 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/shared@11.2.0(vue@3.4.24(typescript@5.4.5))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.4.24(typescript@5.4.5))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/shared@9.13.0(vue@3.4.24(typescript@5.4.5))':
     dependencies:
       vue-demi: 0.14.7(vue@3.4.24(typescript@5.4.5))
@@ -9009,6 +9051,10 @@ snapshots:
     dependencies:
       clipboard: 2.0.11
 
+  vue-demi@0.14.10(vue@3.4.24(typescript@5.4.5)):
+    dependencies:
+      vue: 3.4.24(typescript@5.4.5)
+
   vue-demi@0.14.7(vue@3.4.24(typescript@5.4.5)):
     dependencies:
       vue: 3.4.24(typescript@5.4.5)