1

ks_dashboard_ninja/static/src/scss/common.scss

@@ -1,11 +1,12 @@
 // @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
-// 全局通配符重置限定在 dashboard 页面作用域内，避免影响其他页面（如 udoo_om_ux 主题的深色 dropdown）
+// [YUTHON] 注释掉全局通配符重置：它会把所有元素（含 Odoo 标准按钮）的 margin/padding 清零，
-body.ks_body_class * {
+// 导致「新建」等标准按钮变小、与 dashboard 自带 padding 的按钮大小不一致。已确认卸载此模块无影响。
-    margin: 0;
+// body.ks_body_class * {
-    padding: 0;
+//     margin: 0;
-    box-sizing: border-box;
+//     padding: 0;
-}
+//     box-sizing: border-box;
+// }
 
 body.ks_body_class {
     font-family: "Poppins", sans-serif;
@@ -380,7 +381,8 @@ body.ks_body_class {
             font-weight: $f-w-400;
             line-height: 16px;
             text-align: left;
-            color: $color-paragraph;
+            // [YUTHON] 注释掉：dash-dd-2 内部下拉文字不应硬编码灰蓝色，交给主题继承
+            // color: $color-paragraph;
             cursor: pointer;
 
 
@@ -498,7 +500,8 @@ body.ks_body_class {
 
 .ks_body_class .o-checkbox {
     &.form-check .form-check-input {
-        border-color: $color-placeholders;
+        // [YUTHON] 注释掉：强制 placeholder 灰边框会覆盖 udoo_om_ux 暗色主题下的 checkbox 边框
+        // border-color: $color-placeholders;
     }
 
     .form-check-input[type="checkbox"]:checked {
@@ -550,71 +553,74 @@ body.ks_body_class {
     border: none !important;
 }
 
-.ks_body_class .o_form_button_save {
+// [YUTHON] 注释掉 dashboard 对全局 .o_form_button_save / .o_form_button_cancel 的尺寸硬编码
-    margin-right: 8px !important;
+// （min-height:40px; padding:0 20px 等），它会覆盖 Odoo 主题默认按钮尺寸，导致「保存 / 丢弃」变大。
-}
+// dashboard 自身编辑工具条的 Save/Discard 由 dash-btn-red / dash-default-btn 类兜底，不受影响。
-
+// .ks_body_class .o_form_button_save {
-.ks_body_class .o_form_button_save,
+//     margin-right: 8px !important;
-.ks_body_class .o_form_button_save_new {
+// }
-    /* 与主题模块冲突：强制红色主题会覆盖 Odoo 主题的保存按钮颜色 (@image#1:Clipboard_Screenshot.png) */
+//
-    // background-color: $color-primary-main;
+// .ks_body_class .o_form_button_save,
-    // border: 1px solid $color-primary-main;
+// .ks_body_class .o_form_button_save_new {
-    border-radius: 10px;
+//     /* 与主题模块冲突：强制红色主题会覆盖 Odoo 主题的保存按钮颜色 (@image#1:Clipboard_Screenshot.png) */
-    min-height: 40px;
+//     // background-color: $color-primary-main;
-    padding: 0 20px;
+//     // border: 1px solid $color-primary-main;
-    font-size: $font-14;
+//     border-radius: 10px;
-    font-weight: $f-w-400;
+//     min-height: 40px;
-    line-height: 19.6px;
+//     padding: 0 20px;
-    /* 与主题模块冲突：强制白色文字会覆盖主题深色模式下的保存按钮文字颜色 (@image#1:Clipboard_Screenshot.png) */
+//     font-size: $font-14;
-    // color: $color-white;
+//     font-weight: $f-w-400;
-    cursor: pointer;
+//     line-height: 19.6px;
-    width: auto !important;
+//     /* 与主题模块冲突：强制白色文字会覆盖主题深色模式下的保存按钮文字颜色 (@image#1:Clipboard_Screenshot.png) */
-
+//     // color: $color-white;
-    &.disabled {
+//     cursor: pointer;
-        opacity: 50%;
+//     width: auto !important;
-        pointer-events: none;
+//
-        cursor: not-allowed;
+//     &.disabled {
-    }
+//         opacity: 50%;
-
+//         pointer-events: none;
-    &:hover {
+//         cursor: not-allowed;
-        /* 与主题模块冲突：强制红色悬停背景会覆盖主题深色模式下的按钮悬停样式 (@image#1:Clipboard_Screenshot.png) */
+//     }
-        // background-color: $btn-hover;
+//
-        // color: $color-white !important;
+//     &:hover {
-    }
+//         /* 与主题模块冲突：强制红色悬停背景会覆盖主题深色模式下的按钮悬停样式 (@image#1:Clipboard_Screenshot.png) */
-
+//         // background-color: $btn-hover;
-    @include max-575 {
+//         // color: $color-white !important;
-        font-size: $font-12 !important;
+//     }
-    }
+//
-}
+//     @include max-575 {
-
+//         font-size: $font-12 !important;
-.ks_body_class .o_form_button_cancel {
+//     }
-    border: 0.81px solid $color-E5E7EB;
+// }
-    font-size: $font-16;
+//
-    font-weight: $f-w-500;
+// .ks_body_class .o_form_button_cancel {
-    line-height: 22.4px;
+//     border: 0.81px solid $color-E5E7EB;
-    text-align: left;
+//     font-size: $font-16;
-    /* 与主题模块冲突：强制深色文字会覆盖主题深色模式下的取消按钮文字颜色 (@image#1:Clipboard_Screenshot.png) */
+//     font-weight: $f-w-500;
-    // color: $color-1E1E1E;
+//     line-height: 22.4px;
-    border-radius: 8px;
+//     text-align: left;
-    min-height: 40px;
+//     /* 与主题模块冲突：强制深色文字会覆盖主题深色模式下的取消按钮文字颜色 (@image#1:Clipboard_Screenshot.png) */
-    padding: 0 20px !important;
+//     // color: $color-1E1E1E;
-    /* 与主题模块冲突：强制白色背景会覆盖主题深色模式下的取消按钮背景 (@image#1:Clipboard_Screenshot.png) */
+//     border-radius: 8px;
-    // background-color: $color-white;
+//     min-height: 40px;
-    width: auto !important;
+//     padding: 0 20px !important;
-
+//     /* 与主题模块冲突：强制白色背景会覆盖主题深色模式下的取消按钮背景 (@image#1:Clipboard_Screenshot.png) */
-    &:hover {
+//     // background-color: $color-white;
-        /* 与主题模块冲突：强制浅色悬停背景会覆盖主题深色模式下的按钮悬停样式 (@image#1:Clipboard_Screenshot.png) */
+//     width: auto !important;
-        // background-color: $color-secondary-bg;
+//
-    }
+//     &:hover {
-
+//         /* 与主题模块冲突：强制浅色悬停背景会覆盖主题深色模式下的按钮悬停样式 (@image#1:Clipboard_Screenshot.png) */
-    &:focus {
+//         // background-color: $color-secondary-bg;
-        border: 1px solid $color-E7495E;
+//     }
-    }
+//
-
+//     &:focus {
-    @include max-575 {
+//         border: 1px solid $color-E7495E;
-        font-size: $font-12 !important;
+//     }
-    }
+//
-}
+//     @include max-575 {
+//         font-size: $font-12 !important;
+//     }
+// }
 
 .ks_body_class .active-label {
     font-size: $font-14 !important;
@@ -851,7 +857,8 @@ body.ks_body_class {
         font-weight: $f-w-400;
         line-height: 16px;
         text-align: left;
-        color: $color-paragraph;
+        // [YUTHON] 注释掉：强制灰蓝色会覆盖 udoo_om_ux 暗色主题的下拉文字颜色，导致发暗不可读
+        // color: $color-paragraph;
         cursor: pointer;
         overflow: hidden;
         text-wrap: nowrap;
@@ -2488,9 +2495,11 @@ body.ks_body_class {
     border-bottom: 1px solid var(--color-E5E7EB) !important;
 }
 
-.ks_body_class .o_form_button_save {
+// [YUTHON] 注释掉 dashboard 对全局 .o_form_button_save 的 padding 硬编码（padding:0 29px !important），
-    padding: 0 29px !important;
+// 它会覆盖 Odoo 主题默认按钮内边距，导致「保存」按钮比标准按钮宽/大。已确认卸载此模块无影响。
-}
+// .ks_body_class .o_form_button_save {
+//     padding: 0 29px !important;
+// }
 
 .ks_body_class .modal-body .ks_chart_card_body {
     top:53px !important;

ks_dashboard_ninja/static/src/scss/dark_mode.scss

@@ -0,0 +1,839 @@
+// =============================================================
+// ks_dashboard_ninja / static / src / scss / dark_mode.scss
+// -------------------------------------------------------------
+// 夜魔模式（Dark Mode）全局适配
+// 覆盖概览页、统计瓦片、仪表盘卡片、KPI瓦片、列表等所有浅色硬编码
+// 触发选择器：Odoo 原生 .o_dark_mode + [data-color-mode="dark"]
+//              + Bootstrap5 [data-bs-theme="dark"]
+//              + 模块自带 [data-color-mode="ks-dn-dark"]
+// ============================================================
+
+// ── 暗色色板 ──
+$dm-bg: #1a1b2e;               // 页面主背景（深蓝黑）
+$dm-card-bg: #22253a;          // 卡片背景
+$dm-card-bg-hover: #2a2d45;    // 卡片悬停
+$dm-border: #2e3155;           // 边框线
+$dm-text-primary: #e8eaf0;     // 主文字（近白）
+$dm-text-secondary: #9ca3af;   // 次要文字（灰）
+$dm-text-muted: #6b7280;       // 弱化文字
+
+// 瓦片暗色变体（保留色调辨识度但压暗）
+$dm-tile-red: #3d2228;
+$dm-tile-yellow: #3d3520;
+$dm-tile-green: #1d3a28;
+$dm-tile-purple: #2d2540;
+$dm-tile-default: #22253a;
+
+// ── 统一暗色前缀选择器 ──
+// Odoo 夜魔模式：body.o_dark_mode 或 [data-color-mode="dark"]
+// udoo_om_ux 主题可能用 data-color-mode
+// 模块自带的 ks-dn-dark 也一并覆盖
+
+// ============================================================
+//  1. 页面主体 & 全局背景
+// ============================================================
+body.o_dark_mode.ks_body_class,
+[data-color-mode="dark"] .ks_body_class,
+body[data-bs-theme="dark"] .ks_body_class,
+[data-color-mode="ks-dn-dark"] .ks_body_class {
+    background-color: $dm-bg !important;
+    color: $dm-text-primary;
+
+    .main-box {
+        background-color: transparent;
+    }
+}
+
+// ============================================================
+//  2. 概览页标题区 (.overview-sec-one)
+// ============================================================
+body.o_dark_mode.ks_body_class .overview-sec-one,
+[data-color-mode="dark"] .ks_body_class .overview-sec-one,
+body[data-bs-theme="dark"] .ks_body_class .overview-sec-one,
+[data-color-mode="ks-dn-dark"] .ks_body_class .overview-sec-one {
+    h1 {
+        color: $dm-text-primary;
+
+        span {
+            color: $dm-text-secondary;
+        }
+    }
+}
+
+// ============================================================
+//  3. 统计瓦片行 (.overview-sec-tiles .tile)
+// ============================================================
+body.o_dark_mode .overview-sec-tiles .tile,
+[data-color-mode="dark"] .ks_body_class .overview-sec-tiles .tile,
+body[data-bs-theme="dark"] .ks_body_class .overview-sec-tiles .tile,
+[data-color-mode="ks-dn-dark"] .ks_body_class .overview-sec-tiles .tile {
+    &.one { background-color: $dm-tile-red !important; }
+    &.two { background-color: $dm-tile-yellow !important; }
+    &.three { background-color: $dm-tile-green !important; }
+    &.four { background-color: $dm-tile-purple !important; }
+    &.five { background-color: $dm-tile-default !important; }
+
+    .num {
+        color: $dm-text-primary !important;
+    }
+
+    p {
+        color: $dm-text-secondary !important;
+    }
+
+    &:hover {
+        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.5) !important;
+    }
+}
+
+// ============================================================
+//  4. Screen 卡片 (.screen-cards .card-dn-screen)
+// ============================================================
+body.o_dark_mode.ks_body_class .screen-cards .card-dn-screen,
+[data-color-mode="dark"] .ks_body_class .screen-cards .card-dn-screen,
+body[data-bs-theme="dark"] .ks_body_class .screen-cards .card-dn-screen,
+[data-color-mode="ks-dn-dark"] .ks_body_class .screen-cards .card-dn-screen {
+    &.one { background-color: $dm-tile-red !important; }
+    &.two { background-color: $dm-tile-yellow !important; }
+    &.three { background-color: $dm-tile-green !important; }
+    &.four { background-color: $dm-tile-purple !important; }
+
+    .amount-info,
+    .sub-info {
+        color: $dm-text-primary !important;
+    }
+
+    .screen-title {
+        color: $dm-text-secondary !important;
+    }
+
+    .screen-ratio {
+        color: #f87171 !important;
+    }
+}
+
+// ============================================================
+//  5. 仪表盘预览卡片 (.dashboard-box / .dashboard-container)
+// ============================================================
+body.o_dark_mode.ks_body_class .overview-sec-dasboards .data-added .dashboard-box,
+[data-color-mode="dark"] .ks_body_class .overview-sec-dasboards .data-added .dashboard-box,
+body[data-bs-theme="dark"] .ks_body_class .overview-sec-dasboards .data-added .dashboard-box,
+[data-color-mode="ks-dn-dark"] .ks_body_class .overview-sec-dasboards .data-added .dashboard-box {
+    background-color: $dm-card-bg !important;
+    border: 1px solid $dm-border !important;
+    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.3) !important;
+
+    .dash-preview-box {
+        border-color: $dm-border !important;
+    }
+
+    .dashboard-info .left {
+        h4, p {
+            color: $dm-text-primary !important;
+        }
+    }
+}
+
+body.o_dark_mode.ks_body_class .dasboard-box .dashboard-container,
+[data-color-mode="dark"] .ks_body_class .dasboard-box .dashboard-container,
+body[data-bs-theme="dark"] .ks_body_class .dasboard-box .dashboard-container,
+[data-color-mode="ks-dn-dark"] .ks_body_class .dasboard-box .dashboard-container {
+    border-color: $dm-border !important;
+    background-color: $dm-card-bg !important;
+
+    .dashboard-header h4 {
+        color: $dm-text-primary !important;
+    }
+}
+
+// No-data 区域
+body.o_dark_mode.ks_body_class .overview-sec-dasboards .no-data,
+[data-color-mode="dark"] .ks_body_class .overview-sec-dasboards .no-data,
+body[data-bs-theme="dark"] .ks_body_class .overview-sec-dasboards .no-data,
+[data-color-mode="ks-dn-dark"] .ks_body_class .overview-sec-dasboards .no-data {
+    h3 { color: #60a5fa !important; }
+    p { color: $dm-text-secondary !important; }
+}
+
+// ============================================================
+//  6. KPI 瓦片 (.encapsulated-kpi-tile)
+// ============================================================
+body.o_dark_mode.ks_body_class .encapsulated-kpi-tile.grid-stack-item-content,
+[data-color-mode="dark"] .ks_body_class .encapsulated-kpi-tile.grid-stack-item-content,
+body[data-bs-theme="dark"] .ks_body_class .encapsulated-kpi-tile.grid-stack-item-content,
+[data-color-mode="ks-dn-dark"] .ks_body_class .encapsulated-kpi-tile.grid-stack-item-content {
+    background-color: $dm-card-bg !important;
+    border: 1px solid $dm-border !important;
+
+    .dashboard-item-name,
+    .dashboard-item-data,
+    .ks_dashboard_item_domain_count,
+    .ks_dashboard_item_name,
+    .ks_dashboard_item_domain_count_l3,
+    .ks_dashboard_item_name_l3,
+    .layout-2-count,
+    .layout-2-name,
+    .layout-4-count,
+    .layout-4-name,
+    .layout-6-name,
+    .layout-6-tile-name,
+    .ks_dashboard_item_domain_count_l5 {
+        color: $dm-text-primary !important;
+    }
+
+    .img-bg {
+        background-color: $dm-card-bg-hover !important;
+    }
+
+    .ks_dashboard_icon,
+    .ks_dashboard_icon_l3,
+    .layout-4-icon,
+    .layout-2-icon {
+        background-color: $dm-card-bg-hover !important;
+    }
+
+    &:hover {
+        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.3) !important;
+    }
+}
+
+// layout-6 特殊处理
+body.o_dark_mode.ks_body_class .encapsulated-kpi-tile.layout-6-box,
+[data-color-mode="dark"] .ks_body_class .encapsulated-kpi-tile.layout-6-box,
+body[data-bs-theme="dark"] .ks_body_class .encapsulated-kpi-tile.layout-6-box,
+[data-color-mode="ks-dn-dark"] .ks_body_class .encapsulated-kpi-tile.layout-6-box {
+    .layout-6-tile-name {
+        background-color: $dm-card-bg-hover !important;
+        color: $dm-text-primary !important;
+    }
+}
+
+// layout-2 封装容器
+body.o_dark_mode.ks_body_class .encap-layout-2-box.encapsulated-kpi-tile.grid-stack-item-content,
+[data-color-mode="dark"] .ks_body_class .encap-layout-2-box.encapsulated-kpi-tile.grid-stack-item-content,
+body[data-bs-theme="dark"] .ks_body_class .encap-layout-2-box.encapsulated-kpi-tile.grid-stack-item-content,
+[data-color-mode="ks-dn-dark"] .ks_body_class .encap-layout-2-box.encapsulated-kpi-tile.grid-stack-item-content {
+    .layout-2-icon {
+        background-color: $dm-card-bg-hover !important;
+    }
+}
+
+// ============================================================
+//  7. 封装容器 (.encapsulated-tile-container)
+// ============================================================
+body.o_dark_mode.ks_body_class .encapsulated-tile-container,
+[data-color-mode="dark"] .ks_body_class .encapsulated-tile-container,
+body[data-bs-theme="dark"] .ks_body_class .encapsulated-tile-container,
+[data-color-mode="ks-dn-dark"] .ks_body_class .encapsulated-tile-container {
+    .encapsulated-tile-1 .ks_dashboard_icon,
+    .encapsulated-main-body .ks_dashboard_icon_l3,
+    .layout-4-icon {
+        background-color: $dm-card-bg-hover !important;
+    }
+}
+
+// ============================================================
+//  8. 通用文字颜色修复
+// ============================================================
+body.o_dark_mode.ks_body_class,
+[data-color-mode="dark"] .ks_body_class,
+body[data-bs-theme="dark"] .ks_body_class,
+[data-color-mode="ks-dn-dark"] .ks_body_class {
+    // No data available
+    .no-data-avilable .title,
+    .no-data-avilable p {
+        color: $dm-text-primary !important;
+    }
+
+    // 链接
+    .dash-link {
+        color: #f87171 !important;
+    }
+
+    // 输入框
+    .common-input,
+    .ks_date_input_fields input {
+        background-color: $dm-card-bg !important;
+        color: $dm-text-primary !important;
+        border-color: $dm-border !important;
+
+        &::placeholder {
+            color: $dm-text-muted !important;
+        }
+    }
+
+    // 按钮
+    .dash-default-btn,
+    .feature-btn,
+    .favorite-btn,
+    .dadsh-dlt-btn {
+        background-color: $dm-card-bg-hover !important;
+        color: $dm-text-primary !important;
+        border-color: $dm-border !important;
+
+        &:hover {
+            background-color: $dm-border !important;
+        }
+    }
+
+    .o_form_button_cancel {
+        background-color: transparent !important;
+        color: $dm-text-primary !important;
+        border-color: $dm-border !important;
+    }
+
+    // 下拉菜单
+    .dash-dd-2 .dropdown-toggle {
+        background-color: $dm-card-bg !important;
+        color: $dm-text-primary !important;
+        border-color: $dm-border !important;
+    }
+
+    .dropdown-menu {
+        background-color: $dm-card-bg !important;
+
+        .dropdown-item {
+            color: $dm-text-secondary !important;
+
+            &:hover {
+                background-color: $dm-card-bg-hover !important;
+            }
+        }
+    }
+
+    // Filter collapse 面板
+    .dash-dd-2.filter .custom-dash-collapse .card-body {
+        background-color: $dm-card-bg !important;
+        border-color: $dm-border !important;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4) !important;
+
+        .nav {
+            border-color: $dm-border !important;
+
+            .nav-link {
+                color: $dm-text-secondary !important;
+
+                &.active {
+                    color: #f87171 !important;
+                    border-color: #f87171 !important;
+                    background-color: transparent !important;
+                }
+            }
+        }
+
+        h4, .filter-subtitle {
+            color: $dm-text-secondary !important;
+        }
+
+        .clear-all-btn {
+            color: $dm-text-muted !important;
+        }
+    }
+
+    // Tab 导航
+    .encapsulated-tab-box .nav-tabs {
+        background-color: transparent !important;
+        border-color: $dm-border !important;
+
+        .nav-link {
+            color: $dm-text-secondary !important;
+            background-color: transparent !important;
+
+            &.active {
+                color: #f87171 !important;
+                border-color: #f87171 !important;
+            }
+        }
+    }
+
+    // 表格
+    .encapsulated-tab-box .o_renderer.table-responsive {
+        table {
+            thead tr th {
+                background-color: $dm-card-bg-hover !important;
+                color: $dm-text-primary !important;
+                border-color: $dm-border !important;
+            }
+
+            tbody tr td {
+                background-color: $dm-card-bg !important;
+                color: $dm-text-secondary !important;
+                border-color: $dm-border !important;
+
+                a {
+                    color: #60a5fa !important;
+                }
+            }
+        }
+    }
+
+    // 列表视图
+    .ks_list_view_container {
+        border-color: $dm-border !important;
+        background-color: transparent !important;
+
+        .ks_list_item_table {
+            border-color: $dm-border !important;
+
+            #ksListViewTable.ks_list_view_layout_1 {
+                thead tr th {
+                    background-color: $dm-card-bg-hover !important;
+                    color: $dm-text-primary !important;
+                    border-color: $dm-border !important;
+                }
+
+                tbody tr {
+                    td {
+                        color: $dm-text-secondary !important;
+                        border-color: $dm-border !important;
+                    }
+
+                    &:nth-of-type(odd) > * {
+                        background-color: $dm-card-bg !important;
+                    }
+
+                    &:nth-of-type(even) > * {
+                        background-color: $dm-card-bg-hover !important;
+                    }
+                }
+            }
+        }
+    }
+
+    // 图标按钮
+    .bookmark-capture,
+    .delete-dashboard {
+        background-color: transparent !important;
+
+        svg {
+            stroke: $dm-text-secondary !important;
+        }
+
+        &:hover svg {
+            stroke: $dm-text-primary !important;
+        }
+    }
+
+    .img-bg.info {
+        background-color: $dm-card-bg-hover !important;
+
+        svg {
+            stroke: $dm-text-secondary !important;
+        }
+
+        &.active, &:hover {
+            background-color: #4338ca !important;
+
+            svg {
+                stroke: $dm-text-primary !important;
+            }
+        }
+    }
+
+    .filter svg {
+        stroke: $dm-text-secondary !important;
+    }
+
+    // 文字标签
+    .input-label,
+    .label-checkbox,
+    .ks-dashboard-helping-text,
+    .ks_dashboard_header .ks-helping-text {
+        color: $dm-text-secondary !important;
+    }
+
+    // 预定义过滤器
+    .predefined-filters label {
+        color: $dm-text-secondary !important;
+    }
+
+    .predefined-filters .dropdown-toggle {
+        background-color: $dm-card-bg !important;
+        border-color: $dm-border !important;
+
+        .selcted-opt {
+            background-color: $dm-card-bg-hover !important;
+
+            .opt-title {
+                color: $dm-text-primary !important;
+            }
+        }
+    }
+
+    // Mobile menu
+    .ks-mb-dropdown li {
+        color: $dm-text-primary !important;
+
+        .dash-dd-icons svg path {
+            fill: $dm-text-primary !important;
+        }
+
+        &.active {
+            background-color: $dm-card-bg-hover !important;
+            color: #60a5fa !important;
+
+            .dash-dd-icons svg path {
+                fill: #60a5fa !important;
+            }
+        }
+    }
+
+    // Error modal
+    .error-modal-ks .modal-para {
+        color: $dm-text-secondary !important;
+    }
+
+    // Magic star dropdown
+    .magic-star-dd .img-bg {
+        background-color: $dm-card-bg-hover !important;
+
+        svg path {
+            fill: $dm-text-muted !important;
+            stroke: $dm-text-secondary !important;
+        }
+
+        &:hover {
+            border-color: #4338ca !important;
+        }
+    }
+
+    // Filters amount badge
+    .filters-amount {
+        background-color: #dc2626 !important;
+    }
+
+    // Global active state
+    .global-active {
+        background-color: $dm-card-bg-hover !important;
+    }
+
+    // Export menu
+    .ks_chart_export_menu div {
+        color: $dm-text-secondary !important;
+
+        &:hover {
+            background-color: $dm-card-bg-hover !important;
+        }
+    }
+
+    // Dashboard header
+    .ks_dashboard_header {
+        background-color: $dm-bg !important;
+    }
+
+    // KPI target grey text
+    .ks_kpi_target_grey {
+        color: $dm-text-muted !important;
+    }
+
+    // Theme color swatches
+    .ks_color_white {
+        border-color: $dm-border !important;
+    }
+
+    // Setting container hover
+    .ks_dashboard_setting_container:hover {
+        color: $dm-text-primary !important;
+        background-color: $dm-card-bg-hover !important;
+    }
+
+    // Tiles card
+    .tiles_card {
+        background-color: $dm-card-bg !important;
+    }
+
+    .tiles_card_header {
+        color: $dm-text-secondary !important;
+    }
+
+    // Apps menu icon
+    .ks-apps-menu-icon .img-bg svg path {
+        fill: $dm-text-primary !important;
+    }
+
+    .ks-apps-menu-icon .img-bg:hover {
+        background-color: #4338ca !important;
+
+        svg path {
+            fill: $dm-text-primary !important;
+        }
+    }
+
+    // Mobile burger menu
+    .o_mobile_menu_toggle .ks-mobile-burger-menu {
+        background-color: $dm-card-bg-hover !important;
+    }
+}
+
+// ============================================================
+//  9. 图表区域暗色适配
+// ============================================================
+body.o_dark_mode .chart-right-panel,
+body.o_dark_mode .chart-left-panel,
+[data-color-mode="dark"] .chart-right-panel,
+[data-color-mode="dark"] .chart-left-panel,
+[data-color-mode="ks-dn-dark"] .chart-right-panel,
+[data-color-mode="ks-dn-dark"] .chart-left-panel {
+    background-color: $dm-card-bg !important;
+}
+
+body.o_dark_mode .chart-tabs-container,
+[data-color-mode="dark"] .chart-tabs-container,
+[data-color-mode="ks-dn-dark"] .chart-tabs-container {
+    background-color: $dm-bg !important;
+
+    .nav-tabs {
+        background-color: $dm-card-bg !important;
+    }
+
+    .nav-tabs .nav-link {
+        color: $dm-text-secondary !important;
+        background-color: transparent !important;
+
+        &.active {
+            background-color: #4338ca !important;
+            color: $dm-text-primary !important;
+        }
+    }
+}
+
+body.o_dark_mode .chart-content,
+[data-color-mode="dark"] .chart-content,
+[data-color-mode="ks-dn-dark"] .chart-content {
+    color: $dm-text-primary !important;
+}
+
+body.o_dark_mode .chart-card,
+[data-color-mode="dark"] .chart-card,
+[data-color-mode="ks-dn-dark"] .chart-card {
+    background: $dm-card-bg !important;
+
+    &:hover {
+        background-color: $dm-card-bg-hover !important;
+    }
+}
+
+body.o_dark_mode .chart-list,
+[data-color-mode="dark"] .chart-list,
+[data-color-mode="ks-dn-dark"] .chart-list {
+    background-color: $dm-bg !important;
+}
+
+body.o_dark_mode .chart-numbercount-text,
+[data-color-mode="dark"] .chart-numbercount-text,
+[data-color-mode="ks-dn-dark"] .chart-numbercount-text {
+    color: $dm-text-primary !important;
+}
+
+body.o_dark_mode .chart-form-detail h4,
+body.o_dark_mode .chart-form-detail .o_form_label,
+[data-color-mode="dark"] .chart-form-detail h4,
+[data-color-mode="dark"] .chart-form-detail .o_form_label,
+[data-color-mode="ks-dn-dark"] .chart-form-detail h4,
+[data-color-mode="ks-dn-dark"] .chart-form-detail .o_form_label {
+    color: $dm-text-primary !important;
+}
+
+body.o_dark_mode .chart-secondary-text,
+[data-color-mode="dark"] .chart-secondary-text,
+[data-color-mode="ks-dn-dark"] .chart-secondary-text {
+    color: $dm-text-secondary !important;
+}
+
+body.o_dark_mode .chart-primary-text,
+[data-color-mode="dark"] .chart-primary-text,
+[data-color-mode="ks-dn-dark"] .chart-primary-text {
+    color: $dm-text-primary !important;
+}
+
+// ============================================================
+//  10. Modal / Dialog 暗色适配
+// ============================================================
+body.o_dark_mode .ks_dn_create_chart .modal-content,
+[data-color-mode="dark"] .ks_dn_create_chart .modal-content,
+[data-color-mode="ks-dn-dark"] .ks_dn_create_chart .modal-content {
+    background-color: $dm-card-bg !important;
+}
+
+body.o_dark_mode .ks_dn_create_chart footer,
+[data-color-mode="dark"] .ks_dn_create_chart footer,
+[data-color-mode="ks-dn-dark"] .ks_dn_create_chart footer {
+    background-color: $dm-card-bg !important;
+}
+
+body.o_dark_mode .ks-char-preview .ks-chart-inner,
+body.o_dark_mode .ks-modal-body-inner,
+[data-color-mode="dark"] .ks-char-preview .ks-chart-inner,
+[data-color-mode="dark"] .ks-modal-body-inner,
+[data-color-mode="ks-dn-dark"] .ks-char-preview .ks-chart-inner,
+[data-color-mode="ks-dn-dark"] .ks-modal-body-inner {
+    background-color: $dm-card-bg !important;
+}
+
+body.o_dark_mode .ks-chart-inner .ks-modal-title,
+body.o_dark_mode .ks-modal-body-inner .ks-modal-title,
+[data-color-mode="dark"] .ks-chart-inner .ks-modal-title,
+[data-color-mode="dark"] .ks-modal-body-inner .ks-modal-title,
+[data-color-mode="ks-dn-dark"] .ks-chart-inner .ks-modal-title,
+[data-color-mode="ks-dn-dark"] .ks-modal-body-inner .ks-modal-title {
+    color: $dm-text-primary !important;
+    border-color: $dm-border !important;
+}
+
+body.o_dark_mode .error-modal-ks .modal-header .modal-title,
+[data-color-mode="dark"] .error-modal-ks .modal-header .modal-title,
+[data-color-mode="ks-dn-dark"] .error-modal-ks .modal-header .modal-title {
+    color: $dm-text-primary !important;
+}
+
+body.o_dark_mode .chart-sec-modal .modal-content,
+[data-color-mode="dark"] .chart-sec-modal .modal-content,
+[data-color-mode="ks-dn-dark"] .chart-sec-modal .modal-content {
+    background-color: $dm-card-bg !important;
+}
+
+// Welcome note
+body.o_dark_mode .welcome_note h3,
+[data-color-mode="dark"] .welcome_note h3,
+[data-color-mode="ks-dn-dark"] .welcome_note h3 {
+    color: $dm-text-primary !important;
+
+    span {
+        color: $dm-text-secondary !important;
+    }
+}
+
+// Create chart body
+body.o_dark_mode .ks_dashboard_ninja.ks_create_chart_body,
+[data-color-mode="dark"] .ks_dashboard_ninja.ks_create_chart_body,
+[data-color-mode="ks-dn-dark"] .ks_dashboard_ninja.ks_create_chart_body {
+    background-color: $dm-bg !important;
+}
+
+// Notebook tabs
+body.o_dark_mode .ks_dashboard_ninja.ks_create_chart_body .o_notebook .nav,
+[data-color-mode="dark"] .ks_dashboard_ninja.ks_create_chart_body .o_notebook .nav,
+[data-color-mode="ks-dn-dark"] .ks_dashboard_ninja.ks_create_chart_body .o_notebook .nav {
+    background-color: $dm-bg !important;
+}
+
+body.o_dark_mode .ks_dashboard_ninja.ks_create_chart_body .o_notebook .nav-link,
+[data-color-mode="dark"] .ks_dashboard_ninja.ks_create_chart_body .o_notebook .nav-link,
+[data-color-mode="ks-dn-dark"] .ks_dashboard_ninja.ks_create_chart_body .o_notebook .nav-link {
+    color: $dm-text-secondary !important;
+    background-color: $dm-card-bg !important;
+
+    &.active {
+        background-color: #4338ca !important;
+        color: $dm-text-primary !important;
+    }
+}
+
+// ============================================================
+//  11. 全局冲突修复（非 dashboard 页面被污染的元素）
+// -------------------------------------------------------------
+// 问题：dashboard 模块的 CSS 通过 web.assets_backend 全局加载，
+//       common.scss 中 .dropdown-menu .dropdown-item { color: #4b5563 }
+//       和 .o-checkbox 样式在夜魔模式下污染了其他页面（如 Apps 列表）
+// 修复：用高优先级选择器强制覆盖，确保 checkbox / dropdown 在暗色背景下可读
+// ============================================================
+
+// ── 11a. 全局 dropdown-menu 文字颜色修复 ──
+// 覆盖 common.scss 中硬编码的 color: $color-paragraph (#4b5563)
+body.o_dark_mode .dropdown-menu .dropdown-item,
+[data-color-mode="dark"] .dropdown-menu .dropdown-item,
+body[data-bs-theme="dark"] .dropdown-menu .dropdown-item,
+.o_dark_mode .dropdown-menu .dropdown-item,
+[data-color-mode="ks-dn-dark"] .dropdown-menu .dropdown-item {
+    color: $dm-text-primary !important;
+
+    &:hover,
+    &:focus {
+        background-color: $dm-card-bg-hover !important;
+        color: $dm-text-primary !important;
+    }
+}
+
+// ── 11b. 全局 checkbox / form-check 可见性修复 ──
+body.o_dark_mode .form-check-input[type="checkbox"],
+[data-color-mode="dark"] .form-check-input[type="checkbox"],
+body[data-bs-theme="dark"] .form-check-input[type="checkbox"],
+.o_dark_mode .form-check-input[type="checkbox"],
+[data-color-mode="ks-dn-dark"] .form-check-input[type="checkbox"] {
+    border-color: $dm-text-secondary !important;
+    background-color: transparent !important;
+
+    &:checked {
+        background-color: #4f46e5 !important;   // 靛蓝底（Odoo 夜魔主色系）
+        border-color: #4f46e5 !important;
+    }
+
+    &:hover:not(:checked) {
+        border-color: $dm-text-primary !important;
+    }
+}
+
+// Odoo list view 专用 checkbox (.o-checkbox)
+body.o_dark_mode .o-checkbox .form-check-input,
+[data-color-mode="dark"] .o-checkbox .form-check-input,
+body[data-bs-theme="dark"] .o-checkbox .form-check-input,
+.o_dark_mode .o-checkbox .form-check-input,
+[data-color-mode="ks-dn-dark"] .o-checkbox .form-check-input {
+    border-color: $dm-text-secondary !important;
+    background-color: transparent !important;
+    opacity: 1 !important;
+
+    &:checked {
+        background-color: #4f46e5 !important;
+        border-color: #4f46e5 !important;
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4.25 8.146 2.364 2.364 5.136-5.136'/%3e%3c/svg%3e") !important;
+    }
+}
+
+// ── 11c. List view 行 checkbox 容器（左侧 active 字段列） ──
+body.o_dark_mode .o_list_renderer .o_data_row .o_list_record_selector,
+[data-color-mode="dark"] .o_list_renderer .o_data_row .o_list_record_selector,
+body[data-bs-theme="dark"] .o_list_renderer .o_data_row .o_list_record_selector,
+.o_dark_mode .o_list_renderer .o_data_row .o_list_record_selector,
+[data-color-mode="ks-dn-dark"] .o_list_renderer .o_data_row .o_list_record_selector {
+    .form-check-input {
+        border-color: $dm-text-secondary !important;
+        background-color: transparent !important;
+
+        &:checked {
+            background-color: #4f46e5 !important;
+            border-color: #4f46e5 !important;
+        }
+    }
+}
+
+// ── 11d. 下拉菜单背景色兜底（防止透明/半透明导致文字不可读） ──
+body.o_dark_mode .dropdown-menu,
+[data-color-mode="dark"] .dropdown-menu,
+body[data-bs-theme="dark"] .dropdown-menu,
+.o_dark_mode .dropdown-menu,
+[data-color-mode="ks-dn-dark"] .dropdown-menu {
+    // 仅当背景色过浅或透明时覆盖，不覆盖已正确设置暗色背景的主题
+    background-color: $dm-card-bg !important;
+    border: 1px solid $dm-border !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+}
+
+// ── 11e. Select option 元素（下拉选项） ──
+body.o_dark_mode select option,
+[data-color-mode="dark"] select option,
+body[data-bs-theme="dark"] select option,
+[data-color-mode="ks-dn-dark"] select option {
+    background-color: $dm-card-bg !important;
+    color: $dm-text-primary !important;
+}
+
+// ── 11f. Popover / Tooltip 兜底 ──
+body.o_dark_mode .o_popover,
+[data-color-mode="dark"] .o_popover,
+body[data-bs-theme="dark"] .o_popover,
+[data-color-mode="ks-dn-dark"] .o_popover {
+    background-color: $dm-card-bg !important;
+    color: $dm-text-primary !important;
+    border-color: $dm-border !important;
+}

ks_dashboard_ninja/static/src/scss/main.scss

@@ -4,3 +4,4 @@
 @import "./header.scss";
 @import "./screen.scss";
 @import "./modal.scss";
+@import "./dark_mode.scss";

udoo_om_ux/static/src/core/dialog/view.xml

@@ -3,11 +3,6 @@
     <t t-inherit="web.Dialog" t-inherit-mode="extension">
         <xpath expr="//t[@t-slot='header']" position="after">
             <div t-if="!isFullscreen" class="ms-auto z-buttons">
-                <button class="btn btn-sm lh-1 align-text-top" data-tooltip="Dismiss" data-hotkey="m" tabindex="-1" t-on-click="dismiss">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus">
-                        <path d="M5 12h14"/>
-                    </svg>
-                </button>
                 <button class="btn btn-sm lh-1 align-text-top" data-tooltip="Expand" data-hotkey="m" tabindex="-1" t-on-click="switch_dialog_size">
                     <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-compare">
                         <circle cx="18" cy="18" r="3"/>
@@ -22,6 +17,12 @@
                         <line x1="9" x2="15" y1="15" y2="9"/>
                     </svg>
                 </button>
+                <button class="btn btn-sm lh-1 align-text-top" data-tooltip="Close" data-hotkey="m" tabindex="-1" t-on-click="dismiss">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x">
+                        <path d="M18 6 6 18"/>
+                        <path d="m6 6 12 12"/>
+                    </svg>
+                </button>
             </div>
         </xpath>
     </t>