simplify dark mode related styles

src/components/base/AppMenu.vue

@@ -188,9 +188,4 @@ defineExpose({
   box-shadow: var(--shadow-md);
   padding: var(--spacing-xs) 0;
 }
-
-.dark-mode .app-menu {
-  background-color: var(--bg-white);
-  border-color: var(--border-color);
-}
 </style>

src/components/base/AppMenuItem.vue

@@ -56,7 +56,7 @@ const handleClick = () => {
 }
 
 .dark-mode .app-menu-item:hover {
-  background-color: rgba(255, 255, 255, 0.08);
+  background-color: var(--hover-overlay);
 }
 
 .app-menu-item.is-danger:hover {

src/components/document/DirectorySidebar.vue

@@ -93,10 +93,6 @@ defineExpose({
   border-bottom: 1px solid var(--border-color);
 }
 
-:global(.dark-mode) .sidebar-header {
-  border-color: var(--border-color);
-}
-
 .sidebar-title {
   padding: var(--spacing-md);
   font-size: 16px;
@@ -108,11 +104,6 @@ defineExpose({
   align-items: center;
 }
 
-:global(.dark-mode) .sidebar-title {
-  color: var(--text-dark);
-  border-color: var(--border-color);
-}
-
 .collapse-button {
   padding: 4px;
   color: var(--text-light);

src/components/document/DocumentTree.vue

@@ -299,10 +299,6 @@ defineExpose({ treeRef, closeContextMenu });
   border-bottom: 1px solid var(--border-color);
 }
 
-.dark-mode .tree-toolbar {
-  border-color: var(--border-color);
-}
-
 .tree-toolbar-actions {
   display: flex;
   align-items: center;
@@ -350,7 +346,7 @@ defineExpose({ treeRef, closeContextMenu });
 }
 
 .dark-mode .editor-tree :deep(.el-tree-node__content:hover) {
-  background-color: rgba(255, 255, 255, 0.08);
+  background-color: var(--hover-overlay);
 }
 
 .editor-tree :deep(.el-tree-node.is-current > .el-tree-node__content),
@@ -362,21 +358,12 @@ defineExpose({ treeRef, closeContextMenu });
   outline: none;
 }
 
-.dark-mode .editor-tree :deep(.el-tree-node.is-current > .el-tree-node__content),
-.dark-mode .editor-tree :deep(.el-tree-node.is-focus > .el-tree-node__content),
-.dark-mode .editor-tree :deep(.el-tree-node:focus-within > .el-tree-node__content),
-.dark-mode .editor-tree :deep(.el-tree-node__content:focus),
-.dark-mode .editor-tree :deep(.el-tree-node__content:focus-visible) {
-  background-color: transparent;
-  outline: none;
-}
-
 .tree-node-content.is-selected {
   background-color: rgba(22, 93, 255, 0.1);
 }
 
 .dark-mode .tree-node-content.is-selected {
-  background-color: rgba(64, 128, 255, 0.35);
+  background-color: var(--selected-overlay);
 }
 
 .tree-node-content {

src/components/list/CardListSection.vue

@@ -228,20 +228,4 @@ const resolveMetaRows = (item) => {
   background-color: var(--bg-white);
   border: 1px solid var(--border-color);
 }
-
-.dark-mode .item-name {
-  color: var(--text-dark);
-}
-
-.dark-mode .item-description {
-  color: var(--text-medium);
-}
-
-.dark-mode .meta-label {
-  color: var(--text-light);
-}
-
-.dark-mode .meta-value {
-  color: var(--text-medium);
-}
 </style>

src/components/list/common/CommonListPagination.vue

@@ -148,21 +148,21 @@ const innerPageSize = computed({
 }
 
 :global(.dark-mode .common-list-pagination-popper.el-popper) {
-  background: #1a2230;
+  background: var(--bg-medium);
-  border-color: #2f3b4d;
+  border-color: var(--border-color);
 }
 
 :global(.dark-mode .common-list-pagination-popper .el-select-dropdown__item) {
-  color: #e5e7eb;
+  color: var(--text-primary);
 }
 
 :global(.dark-mode .common-list-pagination-popper .el-select-dropdown__item.is-hovering),
 :global(.dark-mode .common-list-pagination-popper .el-select-dropdown__item:hover) {
-  background: #233147;
+  background: var(--hover-overlay);
 }
 
 :global(.dark-mode .common-list-pagination-popper .el-select-dropdown__item.is-selected) {
-  color: #ffffff;
+  color: var(--bg-white);
-  background: #3370ff;
+  background: var(--primary-color);
 }
 </style>

src/components/manage/InviteCreateDialog.vue

@@ -173,26 +173,4 @@ watch(
   align-items: center;
   gap: var(--spacing-md);
 }
-
-.dark-mode :deep(.el-input-number__decrease),
-.dark-mode :deep(.el-input-number__increase) {
-  background-color: var(--bg-medium);
-  color: var(--text-dark);
-  border-color: var(--border-color);
-}
-
-.dark-mode :deep(.el-switch) {
-  --el-switch-on-color: #3a7afe;
-  --el-switch-off-color: #3a3a3a;
-}
-
-.dark-mode :deep(.el-date-editor),
-.dark-mode :deep(.el-date-editor .el-input__wrapper) {
-  background-color: var(--bg-medium);
-  border-color: var(--border-color);
-}
-
-.dark-mode :deep(.el-date-editor .el-input__inner) {
-  color: var(--text-dark);
-}
 </style>

src/components/manage/ManageSection.vue

@@ -70,8 +70,8 @@ const showHeader = computed(() => Boolean(props.title || slots.header));
 }
 
 .dark-mode .manage-section {
-  background: #161b22;
+  background: var(--bg-white);
-  border-color: #2b2f36;
+  border-color: var(--border-color);
 }
 
 .dark-mode .manage-section--plain {
@@ -80,7 +80,7 @@ const showHeader = computed(() => Boolean(props.title || slots.header));
 }
 
 .dark-mode .section-header {
-  background: #161b22;
+  background: var(--bg-white);
-  border-bottom-color: #2b2f36;
+  border-bottom-color: var(--border-color);
 }
 </style>

src/components/shared/InfoStatsCard.vue

@@ -83,21 +83,4 @@ const formatStatText = (stat) => {
     flex-direction: column;
   }
 }
-
-:global(.dark-mode) .info-stats-card {
-  background: var(--bg-medium);
-  border-color: var(--border-color);
-}
-
-:global(.dark-mode) .info-title {
-  color: var(--text-dark);
-}
-
-:global(.dark-mode) .info-description {
-  color: var(--text-medium);
-}
-
-:global(.dark-mode) .stat-item {
-  color: var(--text-medium);
-}
 </style>

src/styles/dark-mode-overrides.css

@@ -1,5 +1,4 @@
 .dark-mode {
-
   input[type="text"],
   input[type="password"],
   input[type="email"] {

src/styles/variables.css

@@ -122,4 +122,8 @@
   --el-messagebox-content-color: var(--text-dark);
 
   --el-loading-fill-color: rgba(16, 18, 22, 0.72);
+
+  --hover-overlay: rgba(255, 255, 255, 0.08);
+  --selected-overlay: rgba(64, 128, 255, 0.2);
+  --loading-overlay: rgba(11, 17, 26, 0.72);
 }

src/views/document/DocumentAttachmentOpen.vue

@@ -254,6 +254,6 @@ onMounted(async () => {
 
 :global(.dark-mode) .preview-meta,
 :global(.dark-mode) .preview-body {
-  background: var(--bg-secondary);
+  background: var(--bg-medium);
 }
 </style>

src/views/document/DocumentEditor.vue

@@ -495,10 +495,6 @@ watch(collabReady, async (ready) => {
   transition: all 0.3s ease-in-out;
 }
 
-.dark-mode .editor-main {
-  background-color: var(--bg-white);
-}
-
 .editor-content {
   flex: 1;
   display: flex;

src/views/error/NotFound.vue

@@ -95,7 +95,7 @@ const goBack = () => {
 }
 
 :global(body.dark-mode) .not-found-card {
-  box-shadow: none;
+  box-shadow: var(--shadow-sm);
 }
 
 @media (max-width: 640px) {

src/views/template/TemplatePreview.vue

@@ -200,18 +200,14 @@ onMounted(() => {
   padding: var(--spacing-lg) 0;
 }
 
-.dark-mode .template-preview {
-  background: var(--bg-white);
-}
-
 .dark-mode .template-preview-title {
-  color: #f3f4f6;
+  color: var(--text-primary);
 }
 
 .dark-mode .template-preview-meta,
 .dark-mode .template-preview-desc,
 .dark-mode .template-preview-date {
-  color: #cbd5e1;
+  color: var(--text-medium);
 }
 
 </style>

src/views/user/UserNotifications.vue

@@ -216,14 +216,14 @@ const openDetail = (row) => {
 }
 
 .dark-mode .notice-main {
-  color: #e5e7eb;
+  color: var(--text-primary);
 }
 
 .dark-mode .notice-title.is-unread .notice-main {
-  color: #8ab4ff;
+  color: var(--primary-color);
 }
 
 .dark-mode .notice-sub {
-  color: #9aa4b2;
+  color: var(--text-light);
 }
 </style>