feat: 搭建暗黑模式基础框架

src/main.ts

@@ -22,6 +22,49 @@ import router from './router'
 
 const app = createApp(App)
 
+// 动态加载暗黑主题
+async function loadDarkTheme() {
+  // const linkEl = document.createElement('link')
+  // linkEl.rel = 'stylesheet'
+  // linkEl.href = 'https://unpkg.com/element-plus/theme-chalk/dark/css-vars.css' // 暗黑主题 CSS
+  // linkEl.id = 'dark-theme-style'
+  // document.head.appendChild(linkEl)
+
+  await import('element-plus/theme-chalk/dark/css-vars.css') // 动态导入暗黑主题
+}
+// 动态移除暗黑主题
+function unloadDarkTheme() {
+  const darkThemeStylesheet = document.getElementById('dark-theme-style')
+  if (darkThemeStylesheet) {
+    darkThemeStylesheet.remove()
+  }
+}
+// 根据用户偏好或系统设置决定是否加载暗黑主题
+if (
+  (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ||
+  localStorage.getItem('theme') === 'dark'
+) {
+  loadDarkTheme()
+  document.documentElement.classList.add('dark')
+}
+// 根据用户偏好或系统设置决定是否添加暗黑模式类名
+if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+  document.documentElement.classList.add('dark')
+}
+// 提供一个全局方法来切换主题
+app.config.globalProperties.$toggleDarkMode = () => {
+  const html = document.documentElement
+  if (html.classList.contains('dark')) {
+    unloadDarkTheme()
+    html.classList.remove('dark')
+    localStorage.setItem('theme', 'light')
+  } else {
+    loadDarkTheme()
+    html.classList.add('dark')
+    localStorage.setItem('theme', 'dark')
+  }
+}
+
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }

src/styles/index.scss

@@ -9,7 +9,7 @@
   font-size: var(--font-size-3);
   color: var(--color-neutral-1);
   // user-select: none;
-  background-color: white;
+  background-color: var(--color-mode);
 }
 @font-face {
   font-family: 'Lato-Light'; /* 为字体定义一个名称 */

src/styles/theme-g.scss

@@ -0,0 +1,2 @@
+:root.dark {
+}

src/styles/theme.scss

@@ -1,7 +1,10 @@
+@import url(./theme-g.scss);
 :root {
   // color palettes
   --color-theme: #ed6d00;
 
+  --color-mode: #fff;
+
   --color-neutral-1: #2b2f36;
   --color-neutral-2: #646a73;
   --color-neutral-3: #b5b9bf;
@@ -134,3 +137,20 @@
 
   --dashboard-text-color: #646a73;
 }
+
+:root.dark {
+  --color-mode: #2b2f36;
+
+  // 文字颜色
+  --color-neutral-1: #f0f1f3;
+  --color-neutral-2: ragba(240, 241, 243, 0.7);
+  --color-neutral-3: ragba(240, 241, 243, 0.3);
+  --color-border: #3f434a;
+  --color-header-bg: #3f434a;
+
+  // ElementUI
+  // 整体背景颜色
+  --el-bg-color: #2b2f36;
+  // 按钮边框颜色
+  --color-accent-13: #656f7d;
+}

src/views/Layout/src/components/Header/HeaderView.vue

@@ -118,6 +118,7 @@ const handleLogin = () => {
   <div class="layout-toolbar">
     <VBreadcrumb></VBreadcrumb>
     <div class="right-info">
+      <el-button @click="$toggleDarkMode">切换主题</el-button>
       <el-input
         v-model="searchValue"
         size="large"