diff --git a/.gemini-clipboard/clipboard-1769829625914.png b/.gemini-clipboard/clipboard-1769829625914.png
new file mode 100644
index 0000000..b8b1685
Binary files /dev/null and b/.gemini-clipboard/clipboard-1769829625914.png differ
diff --git a/.gemini-clipboard/clipboard-1769829725554.png b/.gemini-clipboard/clipboard-1769829725554.png
new file mode 100644
index 0000000..936e456
Binary files /dev/null and b/.gemini-clipboard/clipboard-1769829725554.png differ
diff --git a/.gemini-clipboard/clipboard-1769830450364.png b/.gemini-clipboard/clipboard-1769830450364.png
new file mode 100644
index 0000000..e569f91
Binary files /dev/null and b/.gemini-clipboard/clipboard-1769830450364.png differ
diff --git a/frontend/src/components/ListActionBar/ListActionBar.css b/frontend/src/components/ListActionBar/ListActionBar.css
index 86b592f..eb9cbf7 100644
--- a/frontend/src/components/ListActionBar/ListActionBar.css
+++ b/frontend/src/components/ListActionBar/ListActionBar.css
@@ -7,10 +7,11 @@
   align-items: center;
   margin-bottom: 4px;
   padding: 16px;
-  background: #ffffff;
+  background: var(--card-bg);
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   width: 100%;
+  border: 1px solid var(--border-color);
 }
 
 .list-action-bar-left,
@@ -41,31 +42,31 @@
   align-items: center;
   gap: 12px;
   padding: 8px 16px;
-  background: #e6f4ff;
-  border: 1px solid #91caff;
+  background: var(--bg-color-secondary);
+  border: 1px solid var(--link-color);
   border-radius: 6px;
   font-size: 14px;
 }
 
 .selection-count {
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--text-color);
 }
 
 .selection-count strong {
-  color: #1677ff;
+  color: var(--link-color);
   font-weight: 600;
   margin: 0 4px;
 }
 
 .all-pages-tag {
-  color: #1677ff;
+  color: var(--link-color);
   font-weight: 500;
   margin-left: 4px;
 }
 
 .select-all-link,
 .clear-selection-link {
-  color: #1677ff;
+  color: var(--link-color);
   cursor: pointer;
   text-decoration: none;
   white-space: nowrap;
diff --git a/frontend/src/components/ListTable/ListTable.css b/frontend/src/components/ListTable/ListTable.css
index 38deeee..0e6cd31 100644
--- a/frontend/src/components/ListTable/ListTable.css
+++ b/frontend/src/components/ListTable/ListTable.css
@@ -1,21 +1,22 @@
 /* 列表表格容器 */
 .list-table-container {
-  background: #ffffff;
+  background: var(--card-bg);
   border-radius: 8px;
   padding: 16px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   height: 626px;
   overflow-y: auto;
   width: 100%;
+  border: 1px solid var(--border-color);
 }
 
 /* 行选中样式 */
 .list-table-container .row-selected {
-  background-color: #e6f7ff;
+  background-color: var(--item-hover-bg);
 }
 
 .list-table-container .row-selected:hover > td {
-  background-color: #bae7ff !important;
+  background-color: var(--item-hover-bg) !important;
 }
 
 /* 分页器中的选择信息样式 */
@@ -26,17 +27,17 @@
 }
 
 .selection-count {
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--text-color-secondary);
   font-size: 14px;
 }
 
 .count-highlight {
-  color: #1677ff;
+  color: var(--link-color);
   font-weight: 600;
 }
 
 .selection-action {
-  color: #1677ff;
+  color: var(--link-color);
   font-size: 14px;
   cursor: pointer;
   text-decoration: none;
@@ -45,5 +46,6 @@
 }
 
 .selection-action:hover {
-  color: #4096ff;
+  color: var(--link-color);
+  opacity: 0.8;
 }
diff --git a/frontend/src/components/MainLayout/AppSider.jsx b/frontend/src/components/MainLayout/AppSider.jsx
index 33da543..4b9df79 100644
--- a/frontend/src/components/MainLayout/AppSider.jsx
+++ b/frontend/src/components/MainLayout/AppSider.jsx
@@ -148,7 +148,7 @@ function AppSider({ collapsed, onToggle }) {
     <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingLeft: 8 }}>
       <img src="/favicon.svg" alt="logo" style={{ width: 32, height: 32 }} />
       {!collapsed && (
-        <span style={{ fontSize: 18, fontWeight: 'bold', color: '#111' }}>NexDocus</span>
+        <span style={{ fontSize: 18, fontWeight: 'bold', color: 'var(--text-color)' }}>NexDocus</span>
       )}
     </div>
   )
diff --git a/frontend/src/components/PDFViewer/VirtualPDFViewer.css b/frontend/src/components/PDFViewer/VirtualPDFViewer.css
index 880ec8b..e95ef79 100644
--- a/frontend/src/components/PDFViewer/VirtualPDFViewer.css
+++ b/frontend/src/components/PDFViewer/VirtualPDFViewer.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  background: #f5f5f5;
+  background: var(--bg-color-secondary);
 }
 
 .pdf-toolbar {
@@ -10,10 +10,11 @@
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
-  background: white;
-  border-bottom: 1px solid #e8e8e8;
+  background: var(--card-bg);
+  border-bottom: 1px solid var(--border-color);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   z-index: 10;
+  color: var(--text-color);
 }
 
 .pdf-content {
@@ -23,7 +24,7 @@
 }
 
 .pdf-virtual-list {
-  background: #f5f5f5;
+  background: var(--bg-color-secondary);
 }
 
 .pdf-page-wrapper {
@@ -31,7 +32,7 @@
   flex-direction: column;
   align-items: center;
   padding: 20px;
-  background: #f5f5f5;
+  background: var(--bg-color-secondary);
 }
 
 .pdf-page-wrapper canvas {
@@ -43,7 +44,7 @@
 .pdf-page-number {
   margin-top: 8px;
   font-size: 13px;
-  color: #000;
+  color: var(--text-color);
   font-weight: 600;
   text-align: center;
 }
@@ -55,7 +56,7 @@
   justify-content: center;
   min-height: 600px;
   gap: 8px;
-  color: #666;
+  color: var(--text-color-secondary);
   font-size: 14px;
 }
 
@@ -64,9 +65,9 @@
   align-items: center;
   justify-content: center;
   min-height: 600px;
-  background: #fafafa;
-  border: 1px dashed #d9d9d9;
-  color: #999;
+  background: var(--item-hover-bg);
+  border: 1px dashed var(--border-color);
+  color: var(--text-color-secondary);
   font-size: 14px;
 }
 
@@ -83,8 +84,8 @@
   justify-content: center;
   align-items: center;
   min-height: 400px;
-  background: white;
-  border: 1px solid #f0f0f0;
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
   border-radius: 4px;
   margin: 20px;
 }
@@ -101,6 +102,7 @@
   align-items: center;
   height: 100%;
   min-height: 400px;
+  color: var(--text-color);
 }
 
 .pdf-error {
diff --git a/frontend/src/index.css b/frontend/src/index.css
index bfa1d8f..5f226e2 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -8,6 +8,15 @@
   --sider-bg: #fff;
   --item-hover-bg: #f5f5f5;
   --card-bg: #fff;
+
+  /* Markdown & Editor Specific */
+  --code-bg: #f6f8fa;
+  --table-border-color: #dfe2e5;
+  --table-header-bg: #f6f8fa;
+  --blockquote-border-color: #dfe2e5;
+  --blockquote-text-color: #6a737d;
+  --toolbar-bg: #fafafa;
+  --link-color: #1677ff;
 }
 
 body.dark {
@@ -20,6 +29,15 @@ body.dark {
   --sider-bg: #141414;
   --item-hover-bg: #1f1f1f;
   --card-bg: #1f1f1f;
+
+  /* Markdown & Editor Specific Dark */
+  --code-bg: #2d2d2d;
+  --table-border-color: #303030;
+  --table-header-bg: #1f1f1f;
+  --blockquote-border-color: #303030;
+  --blockquote-text-color: #8b949e;
+  --toolbar-bg: #1f1f1f;
+  --link-color: #177ddc;
 }
 
 body {
@@ -33,4 +51,67 @@ body {
   font-weight: bold;
   padding: 0 2px;
   border-radius: 2px;
-}
\ No newline at end of file
+}
+
+/* Dark mode overrides for highlight.js */
+body.dark .hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #c9d1d9;
+  background: var(--code-bg) !important;
+}
+
+body.dark .hljs-comment,
+body.dark .hljs-quote {
+  color: #8b949e;
+}
+
+body.dark .hljs-keyword,
+body.dark .hljs-selector-tag {
+  color: #ff7b72;
+}
+
+body.dark .hljs-literal,
+body.dark .hljs-number,
+body.dark .hljs-variable,
+body.dark .hljs-template-variable,
+body.dark .hljs-tag .hljs-attr {
+  color: #79c0ff;
+}
+
+body.dark .hljs-string,
+body.dark .hljs-doctag {
+  color: #a5d6ff;
+}
+
+body.dark .hljs-title,
+body.dark .hljs-section,
+body.dark .hljs-selector-id {
+  color: #d2a8ff;
+}
+
+body.dark .hljs-title.class_,
+body.dark .hljs-class .hljs-title {
+  color: #f0883e;
+}
+
+body.dark .hljs-type,
+body.dark .hljs-built_in,
+body.dark .hljs-builtin-name,
+body.dark .hljs-symbol,
+body.dark .hljs-selector-class,
+body.dark .hljs-selector-attr,
+body.dark .hljs-selector-pseudo {
+  color: #79c0ff;
+}
+
+body.dark .hljs-addition {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+
+body.dark .hljs-deletion {
+  color: #ffdcd7;
+  background-color: #67060c;
+}
diff --git a/frontend/src/pages/Document/DocumentEditor.css b/frontend/src/pages/Document/DocumentEditor.css
index 977c8ef..65b1988 100644
--- a/frontend/src/pages/Document/DocumentEditor.css
+++ b/frontend/src/pages/Document/DocumentEditor.css
@@ -2,6 +2,7 @@
   height: calc(100vh - 64px);
   /* width: calc(100% + 32px); */
   display: flex;
+  background: var(--bg-color);
 }
 
 .document-editor-container {
@@ -12,28 +13,29 @@
 }
 
 .document-sider {
-  border-right: 1px solid #f0f0f0;
+  border-right: 1px solid var(--border-color);
   height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   flex-shrink: 0;
+  background: var(--sider-bg);
 }
 
 .sider-header {
   padding: 16px 20px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border-color);
   display: flex;
   flex-direction: column;
   gap: 12px;
-  background: #fff;
+  background: var(--header-bg);
 }
 
 .sider-header h2 {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
-  color: #262626;
+  color: var(--text-color);
   line-height: 1.5;
 }
 
@@ -74,19 +76,21 @@
   justify-content: center;
   width: 32px;
   height: 32px;
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--text-color-secondary);
 }
 
 .sider-actions .ant-btn:not(.mode-toggle-btn):hover {
-  background: #fff;
-  border-color: #d9d9d9;
-  color: #1677ff;
+  background: var(--item-hover-bg);
+  border-color: var(--border-color);
+  color: var(--link-color);
 }
 
 .file-tree {
   padding: 8px;
   flex: 1;
   overflow-y: auto;
+  background: var(--sider-bg);
+  color: var(--text-color);
 }
 
 /* 修复Tree组件文档名过长的显示问题 */
@@ -136,16 +140,17 @@
   margin: -4px -8px;
   border-radius: 4px;
   transition: all 0.2s;
+  color: var(--text-color);
 }
 
 /* 选中的文件夹样式 */
 .file-tree .folder-selected>.ant-menu-submenu-title {
-  background-color: #e6f7ff !important;
-  color: #1890ff !important;
+  background-color: var(--item-hover-bg) !important;
+  color: var(--link-color) !important;
 }
 
 .file-tree .folder-selected>.ant-menu-submenu-title:hover {
-  background-color: #bae7ff !important;
+  background-color: var(--item-hover-bg) !important;
 }
 
 .file-tree .ant-menu-item,
@@ -159,7 +164,7 @@
 .document-content {
   height: 100%;
   width: 100%;
-  background: white;
+  background: var(--bg-color);
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -177,11 +182,11 @@
 
 .content-header {
   padding: 16px 24px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: white;
+  background: var(--header-bg);
   flex-shrink: 0;
 }
 
@@ -223,7 +228,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #999;
+  color: var(--text-color-secondary);
 }
 
 /* ByteMD 编辑器样式覆盖 */
@@ -232,21 +237,31 @@
   height: 100% !important;
   display: flex !important;
   flex-direction: column !important;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--border-color);
   border-radius: 2px;
   overflow: hidden;
   max-width: none !important;
   /* Ensure no max-width constraint */
   box-sizing: border-box;
+  background-color: var(--bg-color);
+  color: var(--text-color);
 }
 
 /* 工具栏样式 */
 .bytemd-toolbar {
   flex-shrink: 0;
-  border-bottom: 1px solid #d9d9d9;
-  background-color: #fafafa;
+  border-bottom: 1px solid var(--border-color);
+  background-color: var(--toolbar-bg);
   box-sizing: border-box;
-  /* Added for consistent box model */
+  color: var(--text-color);
+}
+
+.bytemd-toolbar-icon {
+  color: var(--text-color);
+}
+
+.bytemd-toolbar-icon:hover {
+  background-color: var(--item-hover-bg);
 }
 
 /* 编辑和预览区域容器 */
@@ -260,6 +275,7 @@
   /* Added for consistent box model */
   min-width: 0;
   /* Prevent flex item from overflowing */
+  background-color: var(--bg-color);
 }
 
 /* 编辑区域 - 固定50%宽度 */
@@ -275,6 +291,8 @@
   /* Added for consistent box model */
   min-width: 0;
   /* Prevent flex item from overflowing */
+  background-color: var(--bg-color);
+  border-right: 1px solid var(--border-color);
 }
 
 /* 预览区域 - 固定50%宽度 */
@@ -291,6 +309,8 @@
   /* Added for consistent box model */
   min-width: 0;
   /* Prevent flex item from overflowing */
+  background-color: var(--bg-color);
+  color: var(--text-color);
 }
 
 /* CodeMirror 容器 */
@@ -301,6 +321,8 @@
   line-height: 1.8;
   width: 100%;
   height: 100%;
+  background-color: var(--bg-color);
+  color: var(--text-color);
 }
 
 /* CodeMirror 滚动容器 */
@@ -322,30 +344,33 @@
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
+  color: var(--text-color);
 }
 
 .bytemd-preview h1 {
   font-size: 2em;
-  border-bottom: 1px solid #eaecef;
+  border-bottom: 1px solid var(--border-color);
   padding-bottom: 0.3em;
 }
 
 .bytemd-preview h2 {
   font-size: 1.5em;
-  border-bottom: 1px solid #eaecef;
+  border-bottom: 1px solid var(--border-color);
   padding-bottom: 0.3em;
 }
 
 .bytemd-preview p {
   margin-bottom: 16px;
+  color: var(--text-color);
 }
 
 .bytemd-preview code {
   padding: 0.2em 0.4em;
   margin: 0;
   font-size: 85%;
-  background-color: rgba(27, 31, 35, 0.05);
+  background-color: var(--code-bg);
   border-radius: 3px;
+  color: var(--text-color);
 }
 
 .bytemd-preview pre {
@@ -353,7 +378,7 @@
   overflow: auto;
   font-size: 85%;
   line-height: 1.45;
-  background-color: #f6f8fa;
+  background-color: var(--code-bg);
   border-radius: 3px;
   margin-bottom: 16px;
 }
@@ -366,6 +391,7 @@
   line-height: inherit;
   background-color: transparent;
   border: 0;
+  color: inherit;
 }
 
 .bytemd-preview img {
@@ -382,25 +408,27 @@
 .bytemd-preview table th,
 .bytemd-preview table td {
   padding: 6px 13px;
-  border: 1px solid #dfe2e5;
+  border: 1px solid var(--table-border-color);
+  color: var(--text-color);
 }
 
 .bytemd-preview table th {
   font-weight: 600;
-  background-color: #f6f8fa;
+  background-color: var(--table-header-bg);
 }
 
 .bytemd-preview blockquote {
   margin: 0 0 16px;
   padding: 0 1em;
-  color: #6a737d;
-  border-left: 0.25em solid #dfe2e5;
+  color: var(--blockquote-text-color);
+  border-left: 0.25em solid var(--blockquote-border-color);
 }
 
 .bytemd-preview ul,
 .bytemd-preview ol {
   padding-left: 2em;
   margin-bottom: 16px;
+  color: var(--text-color);
 }
 
 .bytemd-preview li {
@@ -416,4 +444,5 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 600px;
-}
\ No newline at end of file
+  color: var(--text-color);
+}
diff --git a/frontend/src/pages/Document/DocumentPage.css b/frontend/src/pages/Document/DocumentPage.css
index 8731d00..0f36455 100644
--- a/frontend/src/pages/Document/DocumentPage.css
+++ b/frontend/src/pages/Document/DocumentPage.css
@@ -1,35 +1,37 @@
 .project-docs-page {
   height: calc(100vh - 64px);
   overflow: hidden;
+  background: var(--bg-color);
 }
 
 .docs-layout {
   height: 100%;
-  background: #fff;
+  background: var(--bg-color);
 }
 
 .docs-sider {
-  border-right: 1px solid #f0f0f0;
+  border-right: 1px solid var(--border-color);
   height: 100%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  background: var(--sider-bg);
 }
 
 .docs-sider-header {
   padding: 16px 20px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border-color);
   display: flex;
   flex-direction: column;
   gap: 12px;
-  background: #fff;
+  background: var(--header-bg);
 }
 
 .docs-sider-header h2 {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
-  color: #262626;
+  color: var(--text-color);
   line-height: 1.5;
 }
 
@@ -48,6 +50,7 @@
   align-items: center !important;
   justify-content: center !important;
   padding: 4px 15px !important;
+  color: white !important;
 }
 
 .mode-toggle-btn:hover {
@@ -62,18 +65,21 @@
   justify-content: center;
   width: 32px;
   height: 32px;
+  color: var(--text-color-secondary);
 }
 
 .docs-sider-actions .ant-btn-text:hover {
-  background: #e6f4ff;
-  border-color: #91caff;
-  color: #1677ff;
+  background: var(--item-hover-bg);
+  border-color: var(--border-color);
+  color: var(--link-color);
 }
 
 .docs-menu {
   flex: 1;
   overflow-y: auto;
   border-right: none;
+  background: var(--sider-bg);
+  color: var(--text-color);
 }
 
 /* 修复文档名过长的显示问题 */
@@ -91,12 +97,12 @@
 .docs-content-layout {
   position: relative;
   height: 100%;
-  background: #fff;
+  background: var(--bg-color);
 }
 
 .docs-toc-sider {
-  border-left: 1px solid #f0f0f0;
-  background: #fafafa !important;
+  border-left: 1px solid var(--border-color);
+  background: var(--bg-color-secondary) !important;
   height: 100%;
   overflow: hidden;
   display: flex;
@@ -105,18 +111,18 @@
 
 .toc-header {
   padding: 16px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: #fff;
+  background: var(--header-bg);
 }
 
 .toc-header h3 {
   margin: 0;
   font-size: 14px;
   font-weight: 600;
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--text-color);
 }
 
 .toc-content {
@@ -138,18 +144,18 @@
 
 .toc-content .ant-anchor-link-title {
   font-size: 13px;
-  color: rgba(0, 0, 0, 0.75);
+  color: var(--text-color-secondary);
   line-height: 1.5;
   white-space: nowrap;
 }
 
 .toc-content .ant-anchor-link-active>.ant-anchor-link-title {
-  color: #1890ff;
+  color: var(--link-color);
   font-weight: 500;
 }
 
 .toc-empty {
-  color: #999;
+  color: var(--text-color-secondary);
   text-align: center;
   margin-top: 40px;
   font-size: 13px;
@@ -167,7 +173,7 @@
 .docs-content {
   height: 100%;
   overflow-y: auto;
-  background: #fff;
+  background: var(--bg-color);
 }
 
 .docs-content-wrapper {
@@ -196,7 +202,8 @@
 .markdown-body {
   font-size: 16px;
   line-height: 1.6;
-  color: #333;
+  color: var(--text-color);
+  background-color: var(--bg-color);
 }
 
 .markdown-body h1 {
@@ -205,7 +212,8 @@
   margin-top: 24px;
   margin-bottom: 16px;
   padding-bottom: 8px;
-  border-bottom: 1px solid #eaecef;
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-color);
 }
 
 .markdown-body h2 {
@@ -214,30 +222,38 @@
   margin-top: 24px;
   margin-bottom: 16px;
   padding-bottom: 8px;
-  border-bottom: 1px solid #eaecef;
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-color);
 }
 
-.markdown-body h3 {
-  font-size: 20px;
+.markdown-body h3, 
+.markdown-body h4, 
+.markdown-body h5, 
+.markdown-body h6 {
   font-weight: 600;
   margin-top: 20px;
   margin-bottom: 12px;
+  color: var(--text-color);
 }
 
+.markdown-body h3 { font-size: 20px; }
+
 .markdown-body p {
   margin-bottom: 16px;
+  color: var(--text-color);
 }
 
 .markdown-body code {
-  background-color: #f6f8fa;
+  background-color: var(--code-bg);
   padding: 2px 6px;
   border-radius: 3px;
   font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
   font-size: 14px;
+  color: var(--text-color);
 }
 
 .markdown-body pre {
-  background-color: #f6f8fa;
+  background-color: var(--code-bg);
   padding: 16px;
   border-radius: 6px;
   overflow-x: auto;
@@ -247,12 +263,13 @@
 .markdown-body pre code {
   background-color: transparent;
   padding: 0;
+  color: inherit;
 }
 
 .markdown-body blockquote {
   padding: 0 16px;
-  border-left: 4px solid #dfe2e5;
-  color: #6a737d;
+  border-left: 4px solid var(--blockquote-border-color);
+  color: var(--blockquote-text-color);
   margin-bottom: 16px;
 }
 
@@ -260,16 +277,19 @@
   border-collapse: collapse;
   width: 100%;
   margin-bottom: 16px;
+  display: block;
+  overflow-x: auto;
 }
 
 .markdown-body th,
 .markdown-body td {
-  border: 1px solid #dfe2e5;
+  border: 1px solid var(--table-border-color);
   padding: 8px 13px;
+  color: var(--text-color);
 }
 
 .markdown-body th {
-  background-color: #f6f8fa;
+  background-color: var(--table-header-bg);
   font-weight: 600;
 }
 
@@ -279,7 +299,7 @@
 }
 
 .markdown-body a {
-  color: #1677ff;
+  color: var(--link-color);
   text-decoration: none;
 }
 
@@ -291,8 +311,9 @@
 .markdown-body ol {
   margin-bottom: 16px;
   padding-left: 2em;
+  color: var(--text-color);
 }
 
 .markdown-body li {
   margin-bottom: 4px;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/Notifications/NotificationList.jsx b/frontend/src/pages/Notifications/NotificationList.jsx
index 7282c53..d12565f 100644
--- a/frontend/src/pages/Notifications/NotificationList.jsx
+++ b/frontend/src/pages/Notifications/NotificationList.jsx
@@ -100,7 +100,7 @@ function NotificationList() {
         }
       />
       
-      <Content style={{ padding: '24px', background: '#fff', margin: '24px', borderRadius: '8px' }}>
+      <Content style={{ padding: '24px', background: 'var(--card-bg)', margin: '24px', borderRadius: '8px', border: '1px solid var(--border-color)' }}>
         <Tabs
           activeKey={activeTab}
           onChange={(key) => { setActiveTab(key); setPage(1); }}
@@ -110,7 +110,7 @@ function NotificationList() {
               label: (
                 <Space>
                   全部消息
-                  {activeTab === 'all' && <Badge count={total} overflowCount={99} style={{ backgroundColor: '#d9d9d9' }} />}
+                  {activeTab === 'all' && <Badge count={total} overflowCount={99} style={{ backgroundColor: 'var(--text-color-secondary)' }} />}
                 </Space>
               ) 
             },
@@ -138,24 +138,27 @@ function NotificationList() {
               style={{ 
                 cursor: 'pointer', 
                 padding: '16px', 
-                borderBottom: '1px solid #f0f0f0',
-                background: !item.is_read ? '#f0faff' : 'transparent',
+                borderBottom: '1px solid var(--border-color)',
+                background: !item.is_read ? 'var(--item-hover-bg)' : 'transparent',
                 transition: 'all 0.3s'
               }}
               onClick={() => handleNotificationClick(item)}
             >
               <div style={{ display: 'flex', gap: '16px' }}>
-                <Avatar icon={getCategoryIcon(item.category)} />
+                <Avatar 
+                  icon={getCategoryIcon(item.category)} 
+                  style={{ background: 'var(--bg-color-secondary)' }}
+                />
                 <div style={{ flex: 1 }}>
                   <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
-                    <Text strong={!item.is_read} style={{ fontSize: '16px' }}>
+                    <Text strong={!item.is_read} style={{ fontSize: '16px', color: 'var(--text-color)' }}>
                       {item.title}
                     </Text>
-                    <Text type="secondary" style={{ fontSize: '12px' }}>
+                    <Text type="secondary" style={{ fontSize: '12px', color: 'var(--text-color-secondary)' }}>
                       {new Date(item.created_at).toLocaleString('zh-CN')}
                     </Text>
                   </div>
-                  <div style={{ color: '#595959', marginBottom: '8px' }}>
+                  <div style={{ color: 'var(--text-color)', opacity: 0.85, marginBottom: '8px' }}>
                     {item.content}
                   </div>
                   {!item.is_read && <Tag color="blue">未读</Tag>}
diff --git a/frontend/src/pages/Preview/PreviewPage.css b/frontend/src/pages/Preview/PreviewPage.css
index 1b08e34..f86bb0f 100644
--- a/frontend/src/pages/Preview/PreviewPage.css
+++ b/frontend/src/pages/Preview/PreviewPage.css
@@ -1,38 +1,39 @@
 .preview-page {
   height: 100vh;
   overflow: hidden;
-  background: #fff;
+  background: var(--bg-color);
 }
 
 .preview-layout {
   height: 100%;
-  background: #fff;
+  background: var(--bg-color);
 }
 
 .preview-sider {
-  border-right: 1px solid #f0f0f0;
+  border-right: 1px solid var(--border-color);
   height: 100%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  background: var(--sider-bg);
 }
 
 .preview-sider-header {
   padding: 16px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .preview-sider-header h2 {
   margin: 0 0 8px 0;
   font-size: 18px;
   font-weight: 600;
-  color: rgba(0, 0, 0, 0.88);
+  color: var(--text-color);
 }
 
 .preview-project-desc {
   margin: 0;
   font-size: 13px;
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--text-color-secondary);
   line-height: 1.5;
 }
 
@@ -40,6 +41,8 @@
   flex: 1;
   overflow-y: auto;
   border-right: none;
+  background: var(--sider-bg);
+  color: var(--text-color);
 }
 
 /* 修复文档名过长的显示问题 */
@@ -57,12 +60,12 @@
 .preview-content-layout {
   position: relative;
   height: 100%;
-  background: #fff;
+  background: var(--bg-color);
 }
 
 .preview-toc-sider {
-  border-left: 1px solid #f0f0f0;
-  background: #fafafa !important;
+  border-left: 1px solid var(--border-color);
+  background: var(--bg-color-secondary) !important;
   height: 100%;
   overflow: hidden;
   display: flex;
@@ -71,18 +74,18 @@
 
 .toc-header {
   padding: 16px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: #fff;
+  background: var(--header-bg);
 }
 
 .toc-header h3 {
   margin: 0;
   font-size: 14px;
   font-weight: 600;
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--text-color);
 }
 
 .toc-content {
@@ -102,18 +105,18 @@
 
 .toc-content .ant-anchor-link-title {
   font-size: 13px;
-  color: rgba(0, 0, 0, 0.75);
+  color: var(--text-color-secondary);
   line-height: 1.5;
   white-space: nowrap;
 }
 
 .toc-content .ant-anchor-link-active > .ant-anchor-link-title {
-  color: #1890ff;
+  color: var(--link-color);
   font-weight: 500;
 }
 
 .toc-empty {
-  color: #999;
+  color: var(--text-color-secondary);
   text-align: center;
   margin-top: 40px;
   font-size: 13px;
@@ -131,7 +134,7 @@
 .preview-content {
   height: 100%;
   overflow-y: auto;
-  background: #fff;
+  background: var(--bg-color);
 }
 
 .preview-content-wrapper {
@@ -160,7 +163,8 @@
 .markdown-body {
   font-size: 16px;
   line-height: 1.6;
-  color: #333;
+  color: var(--text-color);
+  background-color: var(--bg-color);
 }
 
 .markdown-body h1 {
@@ -169,7 +173,8 @@
   margin-top: 24px;
   margin-bottom: 16px;
   padding-bottom: 8px;
-  border-bottom: 1px solid #eaecef;
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-color);
 }
 
 .markdown-body h2 {
@@ -178,30 +183,38 @@
   margin-top: 24px;
   margin-bottom: 16px;
   padding-bottom: 8px;
-  border-bottom: 1px solid #eaecef;
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-color);
 }
 
-.markdown-body h3 {
-  font-size: 20px;
+.markdown-body h3, 
+.markdown-body h4, 
+.markdown-body h5, 
+.markdown-body h6 {
   font-weight: 600;
   margin-top: 20px;
   margin-bottom: 12px;
+  color: var(--text-color);
 }
 
+.markdown-body h3 { font-size: 20px; }
+
 .markdown-body p {
   margin-bottom: 16px;
+  color: var(--text-color);
 }
 
 .markdown-body code {
-  background-color: #f6f8fa;
+  background-color: var(--code-bg);
   padding: 2px 6px;
   border-radius: 3px;
   font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
   font-size: 14px;
+  color: var(--text-color);
 }
 
 .markdown-body pre {
-  background-color: #f6f8fa;
+  background-color: var(--code-bg);
   padding: 16px;
   border-radius: 6px;
   overflow-x: auto;
@@ -211,12 +224,13 @@
 .markdown-body pre code {
   background-color: transparent;
   padding: 0;
+  color: inherit;
 }
 
 .markdown-body blockquote {
   padding: 0 16px;
-  border-left: 4px solid #dfe2e5;
-  color: #6a737d;
+  border-left: 4px solid var(--blockquote-border-color);
+  color: var(--blockquote-text-color);
   margin-bottom: 16px;
 }
 
@@ -230,12 +244,13 @@
 
 .markdown-body th,
 .markdown-body td {
-  border: 1px solid #dfe2e5;
+  border: 1px solid var(--table-border-color);
   padding: 8px 13px;
+  color: var(--text-color);
 }
 
 .markdown-body th {
-  background-color: #f6f8fa;
+  background-color: var(--table-header-bg);
   font-weight: 600;
 }
 
@@ -245,7 +260,7 @@
 }
 
 .markdown-body a {
-  color: #1677ff;
+  color: var(--link-color);
   text-decoration: none;
 }
 
@@ -257,6 +272,7 @@
 .markdown-body ol {
   margin-bottom: 16px;
   padding-left: 2em;
+  color: var(--text-color);
 }
 
 .markdown-body li {
@@ -350,4 +366,4 @@
   .markdown-body code {
     font-size: 13px;
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/ProjectList/ProjectList.css b/frontend/src/pages/ProjectList/ProjectList.css
index 599628b..4563073 100644
--- a/frontend/src/pages/ProjectList/ProjectList.css
+++ b/frontend/src/pages/ProjectList/ProjectList.css
@@ -13,6 +13,7 @@
   margin: 0;
   font-size: 24px;
   font-weight: 600;
+  color: var(--text-color);
 }
 
 .project-card {
@@ -21,6 +22,8 @@
   transition: all 0.3s;
   position: relative;
   overflow: hidden;
+  background: var(--card-bg);
+  border-color: var(--border-color);
 }
 
 .project-card:hover {
@@ -53,11 +56,12 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: var(--text-color);
 }
 
 .project-description {
   font-size: 14px;
-  color: #666;
+  color: var(--text-color-secondary);
   margin-bottom: 12px;
   min-height: 40px;
   overflow: hidden;
@@ -69,5 +73,5 @@
 
 .project-meta {
   font-size: 12px;
-  color: #999;
+  color: var(--text-color-secondary);
 }
diff --git a/frontend/src/pages/System/Permissions.jsx b/frontend/src/pages/System/Permissions.jsx
index 2b1e163..aa5c8c5 100644
--- a/frontend/src/pages/System/Permissions.jsx
+++ b/frontend/src/pages/System/Permissions.jsx
@@ -154,7 +154,7 @@ function Permissions() {
   return (
     
       <div style={{ padding: '24px' }}>
-        <h1 style={{ marginBottom: '24px', fontSize: '24px', fontWeight: 600 }}>
+        <h1 style={{ marginBottom: '24px', fontSize: '24px', fontWeight: 600, color: 'var(--text-color)' }}>
           <SafetyOutlined style={{ marginRight: '8px' }} />
           角色权限管理
         </h1>
@@ -177,7 +177,7 @@ function Permissions() {
               }
             >
               {selectedRole ? (
-                <div style={{ marginBottom: 16, padding: '12px', background: '#f0f2f5', borderRadius: 4 }}>
+                <div style={{ marginBottom: 16, padding: '12px', background: 'var(--bg-color-secondary)', borderRadius: 4 }}>
                   <Space>
                     <span style={{ fontWeight: 500 }}>当前角色：</span>
                     <Tag color="blue">{selectedRole.role_name}</Tag>
@@ -189,9 +189,10 @@ function Permissions() {
                   style={{
                     marginBottom: 16,
                     padding: '12px',
-                    background: '#fff7e6',
+                    background: 'var(--bg-color-secondary)',
                     borderRadius: 4,
-                    color: '#ad6800',
+                    color: 'var(--text-color-secondary)',
+                    border: '1px solid var(--border-color)',
                   }}
                 >
                   请从右侧选择一个角色来查看和编辑权限
diff --git a/frontend/src/pages/System/Roles.jsx b/frontend/src/pages/System/Roles.jsx
index a7a4beb..595410a 100644
--- a/frontend/src/pages/System/Roles.jsx
+++ b/frontend/src/pages/System/Roles.jsx
@@ -315,7 +315,7 @@ function Roles() {
   return (
     
       <div style={{ padding: '24px' }}>
-        <h1 style={{ marginBottom: '24px', fontSize: '24px', fontWeight: 600 }}>角色管理</h1>
+        <h1 style={{ marginBottom: '24px', fontSize: '24px', fontWeight: 600, color: 'var(--text-color)' }}>角色管理</h1>
 
         {/* 搜索和操作栏 */}
         <Card style={{ marginBottom: 16 }}>
diff --git a/frontend/src/pages/System/Users.jsx b/frontend/src/pages/System/Users.jsx
index 9980143..e5c2dbf 100644
--- a/frontend/src/pages/System/Users.jsx
+++ b/frontend/src/pages/System/Users.jsx
@@ -300,7 +300,7 @@ function Users() {
   return (
     
       <div style={{ padding: '24px' }}>
-        <h1 style={{ marginBottom: '24px', fontSize: '24px', fontWeight: 600 }}>用户管理</h1>
+        <h1 style={{ marginBottom: '24px', fontSize: '24px', fontWeight: 600, color: 'var(--text-color)' }}>用户管理</h1>
 
         {/* 搜索和操作栏 */}
         <Card style={{ marginBottom: 16 }}>
@@ -400,8 +400,8 @@ function Users() {
                 ))}
               </Select>
             </Form.Item>
-            <div style={{ padding: '8px 0', background: '#fff7e6', border: '1px solid #ffd591', borderRadius: 4 }}>
-              <div style={{ padding: '0 12px', fontSize: 12, color: '#ad6800' }}>
+            <div style={{ padding: '8px 0', background: 'var(--bg-color-secondary)', border: '1px solid var(--border-color)', borderRadius: 4 }}>
+              <div style={{ padding: '0 12px', fontSize: 12, color: 'var(--text-color)' }}>
                 注意：新用户的初始密码将在创建成功后显示，请妥善保管！
               </div>
             </div>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index ac36ac0..a412e92 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -4,6 +4,7 @@ export default {
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {