diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 8a93d3f..90d67f5 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -348,5 +348,101 @@ html.dark {
     color: var(--el-text-color-regular) !important;
     border-top: 1px solid var(--el-bg-color) !important;
   }
+
+  /* 详情抽屉暗黑模式覆盖 */
+  .detail-drawer {
+    .el-drawer__header {
+      color: var(--el-text-color-primary);
+      background: var(--el-bg-color-overlay);
+      border-bottom: 1px solid var(--el-border-color);
+    }
+    .section-header {
+      color: var(--el-color-primary-light-3);
+      border-bottom-color: var(--el-border-color);
+    }
+    .drawer-content {
+      .info-label {
+        color: var(--el-text-color-secondary);
+      }
+      .info-value {
+        color: var(--el-text-color-primary);
+        &.plaintext {
+          border-bottom-color: var(--el-border-color);
+        }
+      }
+    }
+  }
+
+  /* 详情卡片暗黑模式覆盖 */
+  .detail-card {
+    border-color: var(--el-border-color);
+  }
+  .detail-card-title {
+    background: var(--el-bg-color-overlay);
+    color: var(--el-text-color-primary);
+    border-bottom-color: var(--el-border-color);
+  }
+  .detail-item {
+    border-bottom-color: var(--el-border-color-lighter, #2a2a2a);
+  }
+  .detail-label {
+    color: var(--el-text-color-secondary);
+  }
+  .detail-value {
+    color: var(--el-text-color-primary);
+  }
+  .code-wrap {
+    background: var(--el-bg-color-overlay);
+    border-color: var(--el-border-color);
+  }
+  .code-pre {
+    color: var(--el-text-color-regular);
+  }
+  .code-action .el-button {
+    background: rgba(30, 30, 30, 0.9);
+    border-color: var(--el-border-color);
+    color: var(--el-text-color-regular);
+    &:hover {
+      background: var(--el-bg-color-overlay);
+      border-color: var(--el-color-primary);
+    }
+  }
+
+  /* 字典详情抽屉暗黑模式变量 */
+  --dict-drawer-title-color: var(--el-text-color-primary);
+  --dict-drawer-subtext-color: var(--el-text-color-secondary);
+  --dict-drawer-card-bg: var(--el-bg-color-overlay);
+  --dict-drawer-border-color: var(--el-border-color);
+  --dict-drawer-cell-divider: var(--el-border-color-lighter, #2a2a2a);
+
+  /* 通知公告详情抽屉暗黑模式变量 */
+  --notice-title-color: var(--el-text-color-primary);
+  --notice-meta-color: var(--el-text-color-secondary);
+  --notice-meta-icon-color: var(--el-text-color-placeholder, #606266);
+  --notice-border-color: var(--el-border-color);
+  --notice-body-bg: var(--el-bg-color-overlay);
+  --notice-body-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  --notice-content-color: var(--el-text-color-regular);
+  --notice-drawer-body-bg: var(--el-bg-color);
+  --notice-divider-gradient: linear-gradient(to right, transparent, var(--el-border-color), transparent);
+  --notice-divider-dot-color: var(--el-border-color-light, #434343);
+  --notice-blockquote-bg: var(--el-bg-color);
+  --notice-blockquote-border: var(--el-border-color);
+  --notice-table-border: var(--el-border-color);
+  --notice-table-header-bg: var(--el-bg-color);
+  --notice-tag-notify-bg: rgba(217, 119, 6, 0.15);
+  --notice-tag-notify-color: #f6ad55;
+  --notice-tag-announce-bg: rgba(56, 161, 105, 0.15);
+  --notice-tag-announce-color: #68d391;
+}
+
+.notice-detail-drawer {
+  .notice-content {
+    color: var(--el-text-color-regular) !important;
+    * { color: var(--el-text-color-regular) !important; }
+    h1~h6, strong, b { color: var(--el-text-color-primary) !important; }
+    a, a * { color: #5ba7f5 !important; }
+    blockquote, blockquote * { color: var(--el-text-color-secondary) !important; }
+  }
 }
 
diff --git a/src/layout/components/HeaderNotice/DetailView.vue b/src/layout/components/HeaderNotice/DetailView.vue
index 5f3c654..fa08e03 100644
--- a/src/layout/components/HeaderNotice/DetailView.vue
+++ b/src/layout/components/HeaderNotice/DetailView.vue
@@ -120,14 +120,8 @@ defineExpose({
 }
 
 @keyframes notice-fade-up {
-  from {
-    opacity: 0;
-    transform: translateY(14px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  from { opacity: 0; transform: translateY(14px); }
+  to   { opacity: 1; transform: translateY(0); }
 }
 
 .notice-type-tag {
@@ -144,21 +138,21 @@ defineExpose({
 }
 
 .type-notify {
-  background: #fff8e6;
-  color: #b7791f;
+  background: var(--notice-tag-notify-bg, #fff8e6);
+  color: var(--notice-tag-notify-color, #b7791f);
   border-left: 3px solid #d97706;
 }
 
 .type-announce {
-  background: #e8f5e9;
-  color: #276749;
+  background: var(--notice-tag-announce-bg, #e8f5e9);
+  color: var(--notice-tag-announce-color, #276749);
   border-left: 3px solid #38a169;
 }
 
 .notice-title {
   font-size: 22px;
   font-weight: 700;
-  color: #1a202c;
+  color: var(--notice-title-color, #1a202c);
   line-height: 1.45;
   margin: 0 0 16px;
   letter-spacing: -0.2px;
@@ -170,8 +164,8 @@ defineExpose({
   flex-wrap: wrap;
   gap: 16px;
   padding: 12px 0;
-  border-top: 1px solid #e9ecef;
-  border-bottom: 1px solid #e9ecef;
+  border-top: 1px solid var(--notice-border-color, #e9ecef);
+  border-bottom: 1px solid var(--notice-border-color, #e9ecef);
   margin-bottom: 28px;
 }
 
@@ -180,12 +174,12 @@ defineExpose({
   align-items: center;
   gap: 5px;
   font-size: 12px;
-  color: #718096;
+  color: var(--notice-meta-color, #718096);
 }
 
 .meta-item .el-icon {
   font-size: 12px;
-  color: #a0aec0;
+  color: var(--notice-meta-icon-color, #a0aec0);
 }
 
 .status-dot {
@@ -196,13 +190,8 @@ defineExpose({
   margin-right: 4px;
 }
 
-.status-ok {
-  background: #38a169;
-}
-
-.status-off {
-  background: #e53e3e;
-}
+.status-ok  { background: #38a169; }
+.status-off { background: #e53e3e; }
 
 .notice-divider {
   display: flex;
@@ -216,63 +205,50 @@ defineExpose({
   content: '';
   flex: 1;
   height: 1px;
-  background: linear-gradient(to right, transparent, #dee2e6, transparent);
+  background: var(--notice-divider-gradient, linear-gradient(to right, transparent, #dee2e6, transparent));
 }
 
 .notice-divider-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: #cbd5e0;
+  background: var(--notice-divider-dot-color, #cbd5e0);
 }
 
 .notice-body {
-  background: #fff;
+  background: var(--notice-body-bg, #fff);
   border-radius: 6px;
   padding: 28px 32px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--notice-body-shadow, 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04));
   min-height: 120px;
 }
 
 .notice-content {
   font-size: 14px;
   line-height: 1.85;
-  color: #2d3748;
+  color: var(--notice-content-color, #2d3748);
   word-break: break-word;
 }
 
-.notice-content :deep(p) {
-  margin: 0 0 1em;
-}
+.notice-content :deep(p) { margin: 0 0 1em; }
 
 .notice-content :deep(h1),
 .notice-content :deep(h2),
 .notice-content :deep(h3) {
   font-weight: 700;
-  color: #1a202c;
+  color: var(--notice-title-color, #1a202c);
   margin: 1.4em 0 0.6em;
 }
 
-.notice-content :deep(h1) {
-  font-size: 18px;
-}
-
-.notice-content :deep(h2) {
-  font-size: 16px;
-}
-
-.notice-content :deep(h3) {
-  font-size: 14px;
-}
+.notice-content :deep(h1) { font-size: 18px; }
+.notice-content :deep(h2) { font-size: 16px; }
+.notice-content :deep(h3) { font-size: 14px; }
 
 .notice-content :deep(a) {
   color: #3182ce;
   text-decoration: underline;
 }
-
-.notice-content :deep(a:hover) {
-  color: #2b6cb0;
-}
+.notice-content :deep(a:hover) { color: #2b6cb0; }
 
 .notice-content :deep(img) {
   max-width: 100%;
@@ -285,17 +261,14 @@ defineExpose({
   padding-left: 20px;
   margin: 0 0 1em;
 }
-
-.notice-content :deep(li) {
-  margin-bottom: 4px;
-}
+.notice-content :deep(li) { margin-bottom: 4px; }
 
 .notice-content :deep(blockquote) {
-  border-left: 3px solid #cbd5e0;
+  border-left: 3px solid var(--notice-blockquote-border, #cbd5e0);
   margin: 1em 0;
   padding: 6px 16px;
-  color: #718096;
-  background: #f7fafc;
+  color: var(--notice-meta-color, #718096);
+  background: var(--notice-blockquote-bg, #f7fafc);
 }
 
 .notice-content :deep(table) {
@@ -304,34 +277,28 @@ defineExpose({
   margin: 1em 0;
   font-size: 13px;
 }
-
 .notice-content :deep(table th),
 .notice-content :deep(table td) {
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--notice-table-border, #e2e8f0);
   padding: 7px 12px;
 }
-
 .notice-content :deep(table th) {
-  background: #f7fafc;
+  background: var(--notice-table-header-bg, #f7fafc);
   font-weight: 600;
 }
 
 .notice-empty {
   text-align: center;
   padding: 40px 0;
-  color: #a0aec0;
+  color: var(--notice-meta-icon-color, #a0aec0);
   font-size: 13px;
 }
-
 .notice-empty .el-icon {
   font-size: 28px;
   display: inline-flex;
   margin-bottom: 10px;
 }
-
-.notice-empty--inner {
-  padding: 32px 0;
-}
+.notice-empty--inner { padding: 32px 0; }
 
 .notice-detail-drawer__body {
   height: 100%;
@@ -345,14 +312,14 @@ defineExpose({
   .el-drawer__header {
     margin-bottom: 0;
     padding: 16px 20px;
-    border-bottom: 1px solid #ebeef5;
+    border-bottom: 1px solid var(--notice-border-color, #ebeef5);
     font-size: 16px;
     font-weight: 600;
-    color: #303133;
+    color: var(--notice-title-color, #303133);
   }
-  
+
   .el-drawer__body {
-    background: #f5f6f8;
+    background: var(--notice-drawer-body-bg, #f5f6f8);
     padding: 0;
   }
 }
diff --git a/src/views/system/dict/detail.vue b/src/views/system/dict/detail.vue
index ecccd14..472267b 100644
--- a/src/views/system/dict/detail.vue
+++ b/src/views/system/dict/detail.vue
@@ -116,12 +116,12 @@ function loadData() {
 .drawer-head-name {
   font-size: 16px;
   font-weight: 600;
-  color: #2c3e50;
+  color: var(--dict-drawer-title-color, #2c3e50);
   margin-right: 8px;
 }
 .drawer-head-type {
   font-size: 14px;
-  color: #95a5a6;
+  color: var(--dict-drawer-subtext-color, #95a5a6);
   font-family: monospace;
 }
 .drawer-wrap {
@@ -132,13 +132,13 @@ function loadData() {
   align-items: center;
   justify-content: center;
   height: 120px;
-  color: #aaa;
+  color: var(--dict-drawer-subtext-color, #aaa);
   font-size: 13px;
   gap: 8px;
 }
 .drawer-empty {
   text-align: center;
-  color: #bbb;
+  color: var(--dict-drawer-subtext-color, #bbb);
   padding: 60px 0;
   font-size: 13px;
 }
@@ -150,8 +150,8 @@ function loadData() {
   margin-bottom: 16px;
 }
 .stat-card {
-  background: #f7f9fb;
-  border: 1px solid #e8ecf0;
+  background: var(--dict-drawer-card-bg, #f7f9fb);
+  border: 1px solid var(--dict-drawer-border-color, #e8ecf0);
   border-radius: 6px;
   padding: 10px 14px;
   text-align: center;
@@ -159,19 +159,19 @@ function loadData() {
 .stat-num {
   font-size: 22px;
   font-weight: 700;
-  color: #2c3e50;
+  color: var(--dict-drawer-title-color, #2c3e50);
 }
 .stat-num.success { color: #27ae60; }
 .stat-num.danger  { color: #e74c3c; }
 .stat-label {
   font-size: 11px;
-  color: #95a5a6;
+  color: var(--dict-drawer-subtext-color, #95a5a6);
   margin-top: 4px;
 }
 .dict-item {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
-  border: 1px solid #e8ecf0;
+  border: 1px solid var(--dict-drawer-border-color, #e8ecf0);
   border-radius: 6px;
   overflow: hidden;
   margin-bottom: 8px;
@@ -179,7 +179,7 @@ function loadData() {
 .dict-cell {
   display: grid;
   grid-template-columns: 70px 1fr;
-  border-right: 1px solid #f0f4f8;
+  border-right: 1px solid var(--dict-drawer-cell-divider, #f0f4f8);
 }
 .dict-cell:last-child {
   border-right: 0;
@@ -187,14 +187,14 @@ function loadData() {
 .dict-cell-key {
   padding: 9px 14px;
   font-size: 12px;
-  color: #888;
-  background: #f7f9fb;
-  border-right: 1px solid #f0f4f8;
+  color: var(--dict-drawer-subtext-color, #888);
+  background: var(--dict-drawer-card-bg, #f7f9fb);
+  border-right: 1px solid var(--dict-drawer-cell-divider, #f0f4f8);
 }
 .dict-cell-val {
   padding: 9px 14px;
   font-size: 13px;
-  color: #2c3e50;
+  color: var(--dict-drawer-title-color, #2c3e50);
   word-break: break-all;
   display: flex;
   align-items: center;