diff --git a/ks_dashboard_ninja/static/src/scss/ks_dashboard_ninja_dark.scss b/ks_dashboard_ninja/static/src/scss/ks_dashboard_ninja_dark.scss
index b8a5914..0142e46 100644
--- a/ks_dashboard_ninja/static/src/scss/ks_dashboard_ninja_dark.scss
+++ b/ks_dashboard_ninja/static/src/scss/ks_dashboard_ninja_dark.scss
@@ -93,17 +93,33 @@
 // ============================================================
 // 仪表盘内部 KPI / 图表瓦片容器
 // 原 chartScreen.scss/common.scss 多处使用 $color-white 做图标/卡片底。
+//
+// 修复：夜间模式不再用 !important 把 KPI tile 背景统一压成 slate-800，
+// 而是保留用户通过表单配置的内联 background-color，再叠加一层半透明
+// 深色渐变（background-image）把整体压暗。这样用户在「主题/背景颜色」
+// 里调的颜色在夜间仍然可见，只是自动变暗；同时文字强制浅色保证可读。
+//
+// 层次感：统一加浅色边框 + 柔和阴影，让 tile 在深色页面背景下彼此分明，
+// 避免多个 tile 连成一片。
 // ============================================================
-.ks_body_class .encapsulated-kpi-tile.grid-stack-item-content,
-.ks_body_class .grid-stack-item > .grid-stack-item-content,
-.ks_body_class .encapsulated-tile-container,
-.ks_body_class .encap-layout-2-box.encapsulated-kpi-tile {
+
+// 普通图表容器（非 KPI tile）：保持 slate 深色底，避免浅色图表刺眼
+.ks_body_class .grid-stack-item > .grid-stack-item-content:not(.encapsulated-kpi-tile):not(.encapsulated-tile-container) {
     background-color: #1e293b !important;
     border-color: #334155 !important;
-    box-shadow: none !important;
+}
+
+// KPI / tile 容器：保留用户配置色 + 暗色遮罩 + 边框阴影
+.ks_body_class .encapsulated-kpi-tile.grid-stack-item-content,
+.ks_body_class .encapsulated-tile-container,
+.ks_body_class .encap-layout-2-box.encapsulated-kpi-tile {
+    background-image: linear-gradient(rgba(15, 23, 42, 0.42), rgba(15, 23, 42, 0.42)) !important;
+    background-blend-mode: normal !important;
+    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.25) !important;
 
     &:hover {
-        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35), 0 10px 10px rgba(0, 0, 0, 0.25) !important;
+        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45), 0 10px 10px rgba(0, 0, 0, 0.35) !important;
     }
 
     .dashboard-item-name,
@@ -122,13 +138,14 @@
         color: #f1f5f9 !important;
     }
 
+    // 图标小框：半透明深色底，保留一点用户底色，同时让图标可读
     .img-bg,
     .ks_dashboard_icon,
     .ks_dashboard_icon_l3,
     .layout-4-icon,
     .layout-2-icon {
-        background-color: #334155 !important;
-        border-color: #475569 !important;
+        background-color: rgba(30, 41, 59, 0.75) !important;
+        border-color: rgba(255, 255, 255, 0.1) !important;
     }
 }