refactor: simplify dark mode with VueUse + Element Plus

Remove custom CSS variable overrides, use Element Plus built-in dark mode with VueUse useDark

app/assets/css/dark-mode.css

@@ -1,132 +1,42 @@
-/* 暗色模式 CSS 变量 */
+/* 自定义 CSS 变量（Element Plus 组件由其内置暗色模式处理） */
 :root {
+  /* 侧边栏变量 */
   --sidebar-bg: #1e293b;
   --sidebar-header-bg: #0f172a;
   --sidebar-hover-bg: #334155;
   --sidebar-text: #94a3b8;
-  --sidebar-active-text: #fff;
+  --sidebar-active-text: #ffffff;
   --sidebar-active-bg: #3b82f6;
-  --header-bg: #ffffff;
+  
-  --header-border: #e2e8f0;
+  /* 通用文本变量（用于非 Element Plus 元素） */
-  --header-text: #1e293b;
+  --el-text-color-primary: #303133;
-  --main-bg: #f8fafc;
+  --el-text-color-regular: #606266;
-  --main-text: #1e293b;
+  --el-text-color-secondary: #909399;
-  --footer-bg: #ffffff;
+  --el-border-color: #dcdfe6;
-  --footer-border: #e2e8f0;
+  --el-bg-color: #ffffff;
-  --footer-text: #64748b;
+  --el-bg-color-page: #f2f3f5;
 }
 
 html.dark {
+  /* 侧边栏暗色变量 */
   --sidebar-bg: #0f172a;
   --sidebar-header-bg: #020617;
   --sidebar-hover-bg: #1e293b;
   --sidebar-text: #cbd5e1;
-  --sidebar-active-text: #fff;
+  --sidebar-active-text: #ffffff;
   --sidebar-active-bg: #3b82f6;
-  --header-bg: #1e293b;
+  
-  --header-border: #334155;
+  /* 通用文本暗色变量 */
-  --header-text: #f1f5f9;
+  --el-text-color-primary: #e5eaf3;
-  --main-bg: #0f172a;
+  --el-text-color-regular: #cfd3dc;
-  --main-text: #f1f5f9;
+  --el-text-color-secondary: #a3a6ad;
-  --footer-bg: #1e293b;
+  --el-border-color: #4c4d4f;
-  --footer-border: #334155;
+  --el-bg-color: #141414;
-  --footer-text: #cbd5e1;
+  --el-bg-color-page: #0a0a0a;
 }
 
-/* 基础样式 */
+/* 全局基础样式 */
 body {
-  color: var(--main-text);
+  color: var(--el-text-color-primary);
-  background-color: var(--main-bg);
+  background-color: var(--el-bg-color-page);
-}
-
-/* ========== Element Plus 暗色模式全局覆盖 ========== */
-
-/* 输入框、文本框、选择器 */
-html.dark .el-input__inner,
-html.dark .el-textarea__inner,
-html.dark .el-select .el-input__inner,
-html.dark .el-cascader .el-input__inner {
-  color: var(--header-text) !important;
-  background-color: var(--header-bg) !important;
-  border-color: var(--header-border) !important;
-}
-
-/* 选择器下拉项 */
-html.dark .el-select-dropdown__item {
-  color: var(--header-text) !important;
-}
-
-html.dark .el-select-dropdown__item.selected {
-  color: var(--sidebar-active-text) !important;
-  background-color: var(--sidebar-active-bg) !important;
-}
-
-html.dark .el-select-dropdown__item.hover {
-  background-color: var(--sidebar-hover-bg) !important;
-}
-
-/* 表单标签 */
-html.dark .el-form-item__label {
-  color: var(--header-text) !important;
-}
-
-/* 表格 */
-html.dark .el-table {
-  color: var(--header-text);
-}
-
-html.dark .el-table th {
-  background-color: var(--header-bg);
-  color: var(--header-text);
-}
-
-html.dark .el-table tr {
-  background-color: var(--header-bg);
-}
-
-html.dark .el-table td {
-  color: var(--header-text);
-}
-
-/* 卡片 */
-html.dark .el-card {
-  background-color: var(--header-bg);
-  color: var(--header-text);
-}
-
-html.dark .el-card .el-card__header {
-  border-bottom-color: var(--header-border);
-}
-
-/* 标签 */
-html.dark .el-tag {
-  background-color: var(--sidebar-bg) !important;
-  border-color: var(--header-border) !important;
-  color: var(--header-text) !important;
-}
-
-/* 按钮文字颜色 */
-html.dark .el-button--default {
-  color: var(--header-text);
-  background-color: var(--header-bg);
-  border-color: var(--header-border);
-}
-
-html.dark .el-button--primary {
-  background-color: var(--sidebar-active-bg) !important;
-  border-color: var(--sidebar-active-bg) !important;
-  color: #fff !important;
-}
-
-/* 级联选择器、日期选择器等 */
-html.dark .el-cascader .el-input__inner,
-html.dark .el-date-editor .el-input__inner {
-  color: var(--header-text) !important;
-  background-color: var(--header-bg) !important;
-  border-color: var(--header-border) !important;
-}
-
-/* 占位符 */
-html.dark .el-input__inner::placeholder {
-  color: var(--footer-text) !important;
 }

app/layouts/default.vue

@@ -211,21 +211,9 @@ const showLoginDialog = ref(false)
 const logging = ref(false)
 const loginFormRef = ref()
 
-// 使用 VueUse 的 useDark 管理暗色模式 - SSR safe
+// VueUse useDark - 自动添加/移除 html.dark 类，Element Plus 自动响应
-const isDark = ref(false)
+const isDark = useDark()
-const toggleDark = ref(() => {})
+const toggleDark = useToggle(isDark)
-
-onMounted(() => {
-  const dark = useDark({
-    selector: 'html',
-    attribute: 'class',
-    valueDark: 'dark',
-    valueLight: '',
-    storageKey: 'theme',
-  })
-  isDark.value = dark
-  toggleDark.value = useToggle(dark)
-})
 
 const collapsed = ref(false)
 const currentUser = ref<any>(null)
@@ -318,13 +306,13 @@ onMounted(() => {
   if (savedUser) {
     currentUser.value = JSON.parse(savedUser)
   }
-  // 主题切换由 VueUse useDark 自动处理
 })
 </script>
 
 
 
 <style scoped>
+/* ========== 布局容器 ========== */
 .layout-container {
   height: 100vh;
   overflow: hidden;
@@ -334,11 +322,11 @@ onMounted(() => {
   overflow-y: auto;
 }
 
-/* 侧边栏 - 始终使用深色背景 */
+/* ========== 侧边栏 ========== */
 .sidebar {
-  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-header-bg) 100%);
+  background: var(--sidebar-bg);
   color: var(--sidebar-text);
-  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: width 0.3s ease;
   overflow: hidden;
   height: 100%;
   box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
@@ -350,12 +338,12 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   background-color: var(--sidebar-header-bg);
-  border-bottom: 1px rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
   overflow: hidden;
 }
 
 .logo h2 {
-  color: #fff;
+  color: var(--sidebar-active-text);
   font-size: 18px;
   font-weight: 600;
   margin: 0;
@@ -364,11 +352,12 @@ onMounted(() => {
   transition: opacity 0.2s ease;
 }
 
+/* ========== 侧边栏控制按钮 ========== */
 .sidebar-toggle {
   display: flex;
   justify-content: flex-end;
   padding: 8px 12px;
-  border-bottom: 1px rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
 }
 
 .rotate-icon {
@@ -379,13 +368,10 @@ onMounted(() => {
   transform: rotate(180deg);
 }
 
-/* 菜单样式 */
+/* ========== 菜单基础样式 ========== */
 .sidebar-menu {
   border-right: none;
   background-color: transparent;
-}
-
-.sidebar-menu:not(.el-menu--collapse) {
   width: 100%;
 }
 
@@ -396,15 +382,17 @@ onMounted(() => {
   line-height: 48px;
   margin: 4px 8px;
   border-radius: 8px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.2s ease;
 }
 
+/* ========== 菜单悬停状态 ========== */
 .sidebar-menu .el-menu-item:hover,
 .sidebar-menu .el-sub-menu__title:hover {
   background-color: var(--sidebar-hover-bg);
-  color: #fff;
+  color: var(--sidebar-active-text);
 }
 
+/* ========== 菜单激活状态 ========== */
 .sidebar-menu .el-menu-item.is-active,
 .sidebar-menu .el-sub-menu .el-menu-item.is-active {
   background-color: var(--sidebar-active-bg);
@@ -420,87 +408,11 @@ onMounted(() => {
   transform: translateY(-50%);
   width: 3px;
   height: 24px;
-  background-color: #fff;
+  background-color: var(--sidebar-active-text);
   border-radius: 0 3px 3px 0;
 }
 
-/* 子菜单样式 */
+/* ========== 子菜单样式 ========== */
-.sidebar-menu .el-sub-menu .el-menu-item {
-  padding-left: 20px !important;
-  margin: 2px 8px;
-}
-
-/* 菜单图标 */
-.sidebar-menu .el-icon {
-  margin-right: 8px;
-  font-size: 18px;
-}
-
-/* Staggered animation for menu items */
-.sidebar-menu .el-menu-item:nth-child(1),
-.sidebar-menu .el-sub-menu:nth-child(1) {
-  animation-delay: 0.05s;
-}
-
-.sidebar-menu .el-menu-item:nth-child(2),
-.sidebar-menu .el-sub-menu:nth-child(2) {
-  animation-delay: 0.1s;
-}
-
-.sidebar-menu .el-menu-item:nth-child(3),
-.sidebar-menu .el-sub-menu:nth-child(3) {
-  animation-delay: 0.15s;
-}
-
-.sidebar-menu .el-menu-item:nth-child(4),
-.sidebar-menu .el-sub-menu:nth-child(4) {
-  animation-delay: 0.2s;
-}
-
-.sidebar-menu .el-menu-item:nth-child(5),
-.sidebar-menu .el-sub-menu:nth-child(5) {
-  animation-delay: 0.25s;
-}
-
-@keyframes slide-in-left {
-  0% {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-.sidebar-menu .el-menu-item:hover,
-.sidebar-menu .el-sub-menu__title:hover {
-  background-color: var(--sidebar-hover-bg);
-  color: #fff;
-  transform: translateX(5px);
-}
-
-.sidebar-menu .el-menu-item.is-active,
-.sidebar-menu .el-sub-menu .el-menu-item.is-active {
-  background-color: var(--sidebar-active-bg);
-  color: var(--sidebar-active-text);
-  font-weight: 500;
-  transform: translateX(5px);
-}
-
-.sidebar-menu .el-menu-item.is-active::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 3px;
-  height: 24px;
-  background-color: #fff;
-  border-radius: 0 3px 3px 0;
-}
-
-/* 子菜单样式 */
 .sidebar-menu .el-sub-menu .el-menu-item {
   padding-left: 20px !important;
   margin: 2px 8px;
@@ -508,7 +420,7 @@ onMounted(() => {
   align-items: center;
 }
 
-/* 菜单图标 - 确保垂直居中 */
+/* ========== 菜单图标 ========== */
 .sidebar-menu .el-icon {
   display: flex;
   align-items: center;
@@ -518,7 +430,127 @@ onMounted(() => {
   flex-shrink: 0;
 }
 
-/* 子菜单箭头对齐 */
+/* ========== 子菜单箭头 ========== */
+.sidebar-menu .el-sub-menu__title .el-sub-menu__icon-arrow {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+}
+
+.el-main {
+  overflow-y: auto;
+}
+
+/* ========== 侧边栏 ========== */
+.sidebar {
+  background: var(--sidebar-bg);
+  color: var(--sidebar-text);
+  transition: width 0.3s ease;
+  overflow: hidden;
+  height: 100%;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+}
+
+.logo {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--sidebar-header-bg);
+  border-bottom: 1px solid var(--sidebar-text);
+  border-color: color-mix(in srgb, var(--sidebar-text) 10%, transparent);
+  overflow: hidden;
+}
+
+.logo h2 {
+  color: var(--sidebar-active-text);
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  white-space: nowrap;
+  letter-spacing: 0.5px;
+  transition: opacity 0.2s ease;
+}
+
+/* ========== 侧边栏控制按钮 ========== */
+.sidebar-toggle {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px 12px;
+  border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
+}
+
+.rotate-icon {
+  transition: transform 0.3s ease;
+}
+
+.rotate-icon:hover {
+  transform: rotate(180deg);
+}
+
+/* ========== 菜单基础样式 ========== */
+.sidebar-menu {
+  border-right: none;
+  background-color: transparent;
+  width: 100%;
+}
+
+.sidebar-menu .el-menu-item,
+.sidebar-menu .el-sub-menu__title {
+  color: var(--sidebar-text);
+  height: 48px;
+  line-height: 48px;
+  margin: 4px 8px;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+}
+
+/* ========== 菜单悬停状态 ========== */
+.sidebar-menu .el-menu-item:hover,
+.sidebar-menu .el-sub-menu__title:hover {
+  background-color: var(--sidebar-hover-bg);
+  color: var(--sidebar-active-text);
+}
+
+/* ========== 菜单激活状态 ========== */
+.sidebar-menu .el-menu-item.is-active,
+.sidebar-menu .el-sub-menu .el-menu-item.is-active {
+  background-color: var(--sidebar-active-bg);
+  color: var(--sidebar-active-text);
+  font-weight: 500;
+}
+
+.sidebar-menu .el-menu-item.is-active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 24px;
+  background-color: var(--sidebar-active-text);
+  border-radius: 0 3px 3px 0;
+}
+
+/* ========== 子菜单样式 ========== */
+.sidebar-menu .el-sub-menu .el-menu-item {
+  padding-left: 20px !important;
+  margin: 2px 8px;
+  display: flex;
+  align-items: center;
+}
+
+/* ========== 菜单图标 ========== */
+.sidebar-menu .el-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+/* ========== 子菜单箭头 ========== */
 .sidebar-menu .el-sub-menu__title .el-sub-menu__icon-arrow {
   margin-left: auto;
   display: flex;
@@ -526,8 +558,8 @@ onMounted(() => {
 }
 
 .header {
-  background-color: var(--header-bg);
+  background-color: var(--el-bg-color);
-  border-bottom: 1px solid var(--header-border);
+  border-bottom: 1px solid var(--el-border-color);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -550,7 +582,7 @@ onMounted(() => {
 
 .header h3 {
   margin: 0;
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
   font-size: 18px;
   font-weight: 600;
 }
@@ -571,13 +603,13 @@ onMounted(() => {
 }
 
 .username {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
   font-weight: 500;
 }
 
 .theme-toggle-btn {
   margin-right: 12px;
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
   border-radius: 8px;
   padding: 8px;
   transition: all 0.3s ease;
@@ -585,12 +617,12 @@ onMounted(() => {
 
 .theme-toggle-btn:hover {
   background-color: var(--sidebar-hover-bg) !important;
-  color: #fff;
+  color: var(--sidebar-active-text);
   transform: rotate(30deg);
 }
 
 .main-content {
-  background-color: var(--main-bg);
+  background-color: var(--el-bg-color-page);
   padding: 24px;
   height: 100%;
   box-sizing: border-box;
@@ -604,15 +636,15 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-header-bg) 100%);
+  background: var(--sidebar-bg);
-  border-bottom: 1px rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
 }
 
 .drawer-logo h2 {
   margin: 0;
   font-size: 18px;
   font-weight: 600;
-  color: #fff;
+  color: var(--sidebar-active-text);
 }
 
 .drawer-menu {
@@ -631,7 +663,7 @@ onMounted(() => {
 .drawer-menu .el-menu-item.is-active,
 .drawer-menu .el-sub-menu .el-menu-item.is-active {
   background-color: var(--sidebar-hover-bg);
-  color: #fff;
+  color: var(--sidebar-active-text);
 }
 
 .desktop-only {
@@ -669,8 +701,8 @@ onMounted(() => {
 }
 
 .footer {
-  background-color: var(--footer-bg);
+  background-color: var(--el-bg-color);
-  border-top: 1px solid var(--footer-border);
+  border-top: 1px solid var(--el-border-color);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -681,7 +713,7 @@ onMounted(() => {
 
 .footer p {
   margin: 0;
-  color: var(--footer-text);
+  color: var(--el-text-color-secondary);
   font-size: 13px;
 }
 </style>

app/pages/admin/oauth.vue

@@ -305,7 +305,7 @@ onMounted(() => {
 }
 
 .card-header span {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
   font-size: 18px;
   font-weight: 600;
 }
@@ -323,7 +323,7 @@ onMounted(() => {
 
 .form-tip {
   font-size: 12px;
-  color: var(--footer-text);
+  color: var(--el-text-color-secondary);
   margin-top: 4px;
 }
 
@@ -334,18 +334,18 @@ onMounted(() => {
 .secret-display p {
   margin: 16px 0 8px;
   font-size: 14px;
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 .secret-value {
   display: block;
   padding: 12px;
   background-color: var(--header-bg);
-  border: 1px solid var(--header-border);
+  border: 1px solid var(--el-border-color);
   border-radius: 4px;
   word-break: break-all;
   font-size: 13px;
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 .copy-btn {
@@ -356,24 +356,24 @@ onMounted(() => {
 /* 确保表格在暗色模式下文字清晰 */
 :deep(.el-card) {
   background-color: var(--header-bg);
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-card .el-card__header) {
-  border-bottom-color: var(--header-border);
+  border-bottom-color: var(--el-border-color);
 }
 
 :deep(.el-form-item__label) {
-  color: var(--header-text) !important;
+  color: var(--el-text-color-primary) !important;
 }
 
 :deep(.el-table) {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-table th) {
   background-color: var(--header-bg);
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-table tr) {
@@ -381,7 +381,7 @@ onMounted(() => {
 }
 
 :deep(.el-table td) {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 @media (max-width: 900px) {

app/pages/admin/users.vue

@@ -287,7 +287,7 @@ onMounted(() => {
 }
 
 .card-header span {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
   font-size: 18px;
   font-weight: 600;
 }
@@ -298,31 +298,31 @@ onMounted(() => {
 
 .form-tip {
   font-size: 12px;
-  color: var(--footer-text);
+  color: var(--el-text-color-secondary);
   margin-top: 4px;
 }
 
 /* 确保表格和表单在暗色模式下文字清晰 */
 :deep(.el-card) {
   background-color: var(--header-bg);
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-card .el-card__header) {
-  border-bottom-color: var(--header-border);
+  border-bottom-color: var(--el-border-color);
 }
 
 :deep(.el-form-item__label) {
-  color: var(--header-text) !important;
+  color: var(--el-text-color-primary) !important;
 }
 
 :deep(.el-table) {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-table th) {
   background-color: var(--header-bg);
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-table tr) {
@@ -330,7 +330,7 @@ onMounted(() => {
 }
 
 :deep(.el-table td) {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 @media (max-width: 900px) {

app/pages/checkins.vue

@@ -175,7 +175,7 @@ onMounted(() => {
 }
 
 .card-header span {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
   font-size: 18px;
   font-weight: 600;
 }
@@ -187,24 +187,24 @@ onMounted(() => {
 /* 确保表格和表单在暗色模式下文字清晰 */
 :deep(.el-card) {
   background-color: var(--header-bg);
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-card .el-card__header) {
-  border-bottom-color: var(--header-border);
+  border-bottom-color: var(--el-border-color);
 }
 
 :deep(.el-form-item__label) {
-  color: var(--header-text) !important;
+  color: var(--el-text-color-primary) !important;
 }
 
 :deep(.el-table) {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-table th) {
   background-color: var(--header-bg);
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-table tr) {
@@ -212,7 +212,7 @@ onMounted(() => {
 }
 
 :deep(.el-table td) {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 @media (max-width: 900px) {

app/pages/events.vue

@@ -211,7 +211,7 @@ onMounted(() => {
 }
 
 .card-header span {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
   font-size: 18px;
   font-weight: 600;
 }
@@ -223,24 +223,24 @@ onMounted(() => {
 /* 确保表格和表单在暗色模式下文字清晰 */
 :deep(.el-card) {
   background-color: var(--header-bg);
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-card .el-card__header) {
-  border-bottom-color: var(--header-border);
+  border-bottom-color: var(--el-border-color);
 }
 
 :deep(.el-form-item__label) {
-  color: var(--header-text) !important;
+  color: var(--el-text-color-primary) !important;
 }
 
 :deep(.el-table) {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-table th) {
   background-color: var(--header-bg);
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-table tr) {
@@ -248,7 +248,7 @@ onMounted(() => {
 }
 
 :deep(.el-table td) {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 /* Table row staggered animations */

app/pages/index.vue

@@ -153,12 +153,12 @@ onMounted(async () => {
 }
 
 .welcome-card h1 {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
   margin-bottom: 10px;
 }
 
 .welcome-card p {
-  color: var(--footer-text);
+  color: var(--el-text-color-secondary);
   font-size: 16px;
 }
 
@@ -184,12 +184,12 @@ onMounted(async () => {
 .stat-value {
   font-size: 32px;
   font-weight: bold;
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 .stat-label {
   font-size: 14px;
-  color: var(--footer-text);
+  color: var(--el-text-color-secondary);
   margin-top: 5px;
 }
 
@@ -210,8 +210,8 @@ onMounted(async () => {
 
 .system-info li {
   padding: 8px 0;
-  border-bottom: 1px solid var(--header-border);
+  border-bottom: 1px solid var(--el-border-color);
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 .system-info li:last-child {

app/pages/results.vue

@@ -185,7 +185,7 @@ onMounted(() => {
 }
 
 .card-header span {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
   font-size: 18px;
   font-weight: 600;
 }
@@ -197,24 +197,24 @@ onMounted(() => {
 /* 确保表格和表单在暗色模式下文字清晰 */
 :deep(.el-card) {
   background-color: var(--header-bg);
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-card .el-card__header) {
-  border-bottom-color: var(--header-border);
+  border-bottom-color: var(--el-border-color);
 }
 
 :deep(.el-form-item__label) {
-  color: var(--header-text) !important;
+  color: var(--el-text-color-primary) !important;
 }
 
 :deep(.el-table) {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-table th) {
   background-color: var(--header-bg);
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-table tr) {
@@ -222,7 +222,7 @@ onMounted(() => {
 }
 
 :deep(.el-table td) {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 /* Table row staggered animations */

app/pages/scoreboard.vue

@@ -173,7 +173,7 @@ onMounted(() => {
 }
 
 .card-header span {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
   font-size: 18px;
   font-weight: 600;
 }
@@ -185,24 +185,24 @@ onMounted(() => {
 /* 确保表格和表单在暗色模式下文字清晰 */
 :deep(.el-card) {
   background-color: var(--header-bg);
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-card .el-card__header) {
-  border-bottom-color: var(--header-border);
+  border-bottom-color: var(--el-border-color);
 }
 
 :deep(.el-form-item__label) {
-  color: var(--header-text) !important;
+  color: var(--el-text-color-primary) !important;
 }
 
 :deep(.el-table) {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-table th) {
   background-color: var(--header-bg);
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-table tr) {
@@ -210,7 +210,7 @@ onMounted(() => {
 }
 
 :deep(.el-table td) {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 .rank-cell {
@@ -219,7 +219,7 @@ onMounted(() => {
   align-items: center;
   font-size: 18px;
   font-weight: bold;
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 .medals {
@@ -240,8 +240,8 @@ onMounted(() => {
 
 .rules-list li {
   padding: 8px 0;
-  border-bottom: 1px solid var(--header-border);
+  border-bottom: 1px solid var(--el-border-color);
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 .rules-list li:last-child {
@@ -253,8 +253,8 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 8px 0;
-  border-bottom: 1px solid var(--header-border);
+  border-bottom: 1px solid var(--el-border-color);
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 .top-item:last-child {

app/pages/teams.vue

@@ -157,7 +157,7 @@ onMounted(() => {
 }
 
 .card-header span {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
   font-size: 18px;
   font-weight: 600;
 }
@@ -169,24 +169,24 @@ onMounted(() => {
 /* 确保表格和表单在暗色模式下文字清晰 */
 :deep(.el-card) {
   background-color: var(--header-bg);
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-card .el-card__header) {
-  border-bottom-color: var(--header-border);
+  border-bottom-color: var(--el-border-color);
 }
 
 :deep(.el-form-item__label) {
-  color: var(--header-text) !important;
+  color: var(--el-text-color-primary) !important;
 }
 
 :deep(.el-table) {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-table th) {
   background-color: var(--header-bg);
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 :deep(.el-table tr) {
@@ -194,7 +194,7 @@ onMounted(() => {
 }
 
 :deep(.el-table td) {
-  color: var(--header-text);
+  color: var(--el-text-color-primary);
 }
 
 @media (max-width: 900px) {

nuxt.config.ts

@@ -1,5 +1,7 @@
 export default defineNuxtConfig({
   ssr: false,
   modules: ['@element-plus/nuxt'],
-  css: ['~/assets/css/dark-mode.css']
+  elementPlus: {
+    themes: ['dark'],
+  },
 })