diff --git a/src/components/base/AppMenu.vue b/src/components/base/AppMenu.vue
index 59a2260..815e390 100644
--- a/src/components/base/AppMenu.vue
+++ b/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>
diff --git a/src/components/base/AppMenuItem.vue b/src/components/base/AppMenuItem.vue
index dea6843..1056e2e 100644
--- a/src/components/base/AppMenuItem.vue
+++ b/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 {
diff --git a/src/components/document/DirectorySidebar.vue b/src/components/document/DirectorySidebar.vue
index ffe54d8..2c18696 100644
--- a/src/components/document/DirectorySidebar.vue
+++ b/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);
diff --git a/src/components/document/DocumentTree.vue b/src/components/document/DocumentTree.vue
index 9e0ffac..3ca1e5c 100644
--- a/src/components/document/DocumentTree.vue
+++ b/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 {
diff --git a/src/components/list/CardListSection.vue b/src/components/list/CardListSection.vue
index 7850e61..d757ad0 100644
--- a/src/components/list/CardListSection.vue
+++ b/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>
diff --git a/src/components/list/common/CommonListPagination.vue b/src/components/list/common/CommonListPagination.vue
index 4a46672..065e289 100644
--- a/src/components/list/common/CommonListPagination.vue
+++ b/src/components/list/common/CommonListPagination.vue
@@ -148,21 +148,21 @@ const innerPageSize = computed({
 }
 
 :global(.dark-mode .common-list-pagination-popper.el-popper) {
-  background: #1a2230;
-  border-color: #2f3b4d;
+  background: var(--bg-medium);
+  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;
-  background: #3370ff;
+  color: var(--bg-white);
+  background: var(--primary-color);
 }
 </style>
diff --git a/src/components/manage/InviteCreateDialog.vue b/src/components/manage/InviteCreateDialog.vue
index c3257e4..4383f99 100644
--- a/src/components/manage/InviteCreateDialog.vue
+++ b/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>
diff --git a/src/components/manage/ManageSection.vue b/src/components/manage/ManageSection.vue
index a7d7122..cc08c57 100644
--- a/src/components/manage/ManageSection.vue
+++ b/src/components/manage/ManageSection.vue
@@ -70,8 +70,8 @@ const showHeader = computed(() => Boolean(props.title || slots.header));
 }
 
 .dark-mode .manage-section {
-  background: #161b22;
-  border-color: #2b2f36;
+  background: var(--bg-white);
+  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;
-  border-bottom-color: #2b2f36;
+  background: var(--bg-white);
+  border-bottom-color: var(--border-color);
 }
 </style>
diff --git a/src/components/shared/InfoStatsCard.vue b/src/components/shared/InfoStatsCard.vue
index 624d26c..26b960b 100644
--- a/src/components/shared/InfoStatsCard.vue
+++ b/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>
diff --git a/src/styles/dark-mode-overrides.css b/src/styles/dark-mode-overrides.css
index 36c461a..bc48504 100644
--- a/src/styles/dark-mode-overrides.css
+++ b/src/styles/dark-mode-overrides.css
@@ -1,5 +1,4 @@
 .dark-mode {
-
   input[type="text"],
   input[type="password"],
   input[type="email"] {
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 622db76..64f8689 100644
--- a/src/styles/variables.css
+++ b/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);
 }
diff --git a/src/views/document/DocumentAttachmentOpen.vue b/src/views/document/DocumentAttachmentOpen.vue
index 3ca9502..34f418f 100644
--- a/src/views/document/DocumentAttachmentOpen.vue
+++ b/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>
diff --git a/src/views/document/DocumentEditor.vue b/src/views/document/DocumentEditor.vue
index c562370..ed3a10b 100644
--- a/src/views/document/DocumentEditor.vue
+++ b/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;
diff --git a/src/views/error/NotFound.vue b/src/views/error/NotFound.vue
index 0d6cce5..6dedb6e 100644
--- a/src/views/error/NotFound.vue
+++ b/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) {
diff --git a/src/views/template/TemplatePreview.vue b/src/views/template/TemplatePreview.vue
index fe3727b..667bc50 100644
--- a/src/views/template/TemplatePreview.vue
+++ b/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>
diff --git a/src/views/user/UserNotifications.vue b/src/views/user/UserNotifications.vue
index fd47751..e2ab090 100644
--- a/src/views/user/UserNotifications.vue
+++ b/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>