diff --git a/src/assets/main.scss b/src/assets/main.scss new file mode 100644 index 0000000..53b45d4 --- /dev/null +++ b/src/assets/main.scss @@ -0,0 +1,31 @@ +/* 亮色模式 */ +:root { + --bg-color: #ffffff; + --text-color: rgba(0, 0, 0, .85); + --border-top: #f0f0f0; + --border-color:#eee; + --border-bottom:#eee; + --font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; +} + +/* 暗黑模式 */ +:root.dark, +:root[data-theme="dark"] { + --bg-color: #232324; + --border-color: #2e2e30; + --border-bottom:#484849; + --text-color: rgba(255, 255, 255, .7); + --border-top: #121111; + --color: #fff; +} + +/* 应用变量 */ +body { + background-color: var(--bg-color); + color: var(--text-color); + font-family: var(--font-family); + border-top: 1px solid var(--border-top); + border-color: var(--border-color); + border-bottom: var(--border-bottom); + transition: all 0.3s ease; /* 平滑过渡效果 */ +} \ No newline at end of file diff --git a/src/components/layout/src/Layout.vue b/src/components/layout/src/Layout.vue index 79bb641..7add26a 100644 --- a/src/components/layout/src/Layout.vue +++ b/src/components/layout/src/Layout.vue @@ -149,7 +149,7 @@ .dark { .l-content { - background-color: #1e1e1e; // 暗黑模式下的背景色,可自定义 + background-color: black; // 暗黑模式下的背景色,可自定义 } } diff --git a/src/main.ts b/src/main.ts index 502bb20..4c4dbe7 100644 --- a/src/main.ts +++ b/src/main.ts @@ -6,6 +6,7 @@ import "animate.css"; import App from "./App.vue"; import router from "./router"; import "./assets/scss/common.scss"; +import './assets/main.scss' // import { initEnums, } from "@/utils/emnus"; // initEnums(); diff --git a/src/stores/settings.ts b/src/stores/settings.ts index 15e734b..37cd826 100644 --- a/src/stores/settings.ts +++ b/src/stores/settings.ts @@ -5,6 +5,18 @@ export const useSettingsStore = defineStore( "setting", () => { const isDark = ref(false); + + watch(isDark, (newVal) => { + // 控制根元素 class + if (newVal) { + document.documentElement.classList.add('dark'); + document.documentElement.setAttribute('data-theme', 'dark'); + } else { + document.documentElement.classList.remove('dark'); + document.documentElement.setAttribute('data-theme', 'light'); + } + }, { immediate: true }); // 立即执行一次初始化 + const theme = computed(() => isDark.value ? darkTheme : null ); diff --git a/src/views/index.vue b/src/views/index.vue index 1f7c0b4..c7c85a6 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -167,18 +167,20 @@ ])