From aa41ca72a6a82043727b8a8b151e967ee61d97b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E9=B9=8F=E5=AE=87?= Date: Fri, 7 Aug 2026 18:33:00 +0800 Subject: [PATCH] 1 --- .../static/src/scss/common.scss | 163 ++-- .../static/src/scss/dark_mode.scss | 839 ++++++++++++++++++ ks_dashboard_ninja/static/src/scss/main.scss | 3 +- udoo_om_ux/static/src/core/dialog/view.xml | 11 +- 4 files changed, 933 insertions(+), 83 deletions(-) create mode 100644 ks_dashboard_ninja/static/src/scss/dark_mode.scss diff --git a/ks_dashboard_ninja/static/src/scss/common.scss b/ks_dashboard_ninja/static/src/scss/common.scss index 79b3cdb..b1e5be1 100644 --- a/ks_dashboard_ninja/static/src/scss/common.scss +++ b/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） -body.ks_body_class * { - margin: 0; - padding: 0; - box-sizing: border-box; -} +// [YUTHON] 注释掉全局通配符重置：它会把所有元素（含 Odoo 标准按钮）的 margin/padding 清零， +// 导致「新建」等标准按钮变小、与 dashboard 自带 padding 的按钮大小不一致。已确认卸载此模块无影响。 +// body.ks_body_class * { +// margin: 0; +// 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 { - margin-right: 8px !important; -} - -.ks_body_class .o_form_button_save, -.ks_body_class .o_form_button_save_new { - /* 与主题模块冲突：强制红色主题会覆盖 Odoo 主题的保存按钮颜色 (@image#1:Clipboard_Screenshot.png) */ - // background-color: $color-primary-main; - // border: 1px solid $color-primary-main; - border-radius: 10px; - min-height: 40px; - padding: 0 20px; - font-size: $font-14; - font-weight: $f-w-400; - line-height: 19.6px; - /* 与主题模块冲突：强制白色文字会覆盖主题深色模式下的保存按钮文字颜色 (@image#1:Clipboard_Screenshot.png) */ - // color: $color-white; - cursor: pointer; - width: auto !important; - - &.disabled { - opacity: 50%; - pointer-events: none; - cursor: not-allowed; - } - - &:hover { - /* 与主题模块冲突：强制红色悬停背景会覆盖主题深色模式下的按钮悬停样式 (@image#1:Clipboard_Screenshot.png) */ - // background-color: $btn-hover; - // color: $color-white !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; - line-height: 22.4px; - text-align: left; - /* 与主题模块冲突：强制深色文字会覆盖主题深色模式下的取消按钮文字颜色 (@image#1:Clipboard_Screenshot.png) */ - // color: $color-1E1E1E; - border-radius: 8px; - min-height: 40px; - padding: 0 20px !important; - /* 与主题模块冲突：强制白色背景会覆盖主题深色模式下的取消按钮背景 (@image#1:Clipboard_Screenshot.png) */ - // background-color: $color-white; - width: auto !important; - - &:hover { - /* 与主题模块冲突：强制浅色悬停背景会覆盖主题深色模式下的按钮悬停样式 (@image#1:Clipboard_Screenshot.png) */ - // background-color: $color-secondary-bg; - } - - &:focus { - border: 1px solid $color-E7495E; - } - - @include max-575 { - font-size: $font-12 !important; - } -} +// [YUTHON] 注释掉 dashboard 对全局 .o_form_button_save / .o_form_button_cancel 的尺寸硬编码 +// （min-height:40px; padding:0 20px 等），它会覆盖 Odoo 主题默认按钮尺寸，导致「保存 / 丢弃」变大。 +// dashboard 自身编辑工具条的 Save/Discard 由 dash-btn-red / dash-default-btn 类兜底，不受影响。 +// .ks_body_class .o_form_button_save { +// margin-right: 8px !important; +// } +// +// .ks_body_class .o_form_button_save, +// .ks_body_class .o_form_button_save_new { +// /* 与主题模块冲突：强制红色主题会覆盖 Odoo 主题的保存按钮颜色 (@image#1:Clipboard_Screenshot.png) */ +// // background-color: $color-primary-main; +// // border: 1px solid $color-primary-main; +// border-radius: 10px; +// min-height: 40px; +// padding: 0 20px; +// font-size: $font-14; +// font-weight: $f-w-400; +// line-height: 19.6px; +// /* 与主题模块冲突：强制白色文字会覆盖主题深色模式下的保存按钮文字颜色 (@image#1:Clipboard_Screenshot.png) */ +// // color: $color-white; +// cursor: pointer; +// width: auto !important; +// +// &.disabled { +// opacity: 50%; +// pointer-events: none; +// cursor: not-allowed; +// } +// +// &:hover { +// /* 与主题模块冲突：强制红色悬停背景会覆盖主题深色模式下的按钮悬停样式 (@image#1:Clipboard_Screenshot.png) */ +// // background-color: $btn-hover; +// // color: $color-white !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; +// line-height: 22.4px; +// text-align: left; +// /* 与主题模块冲突：强制深色文字会覆盖主题深色模式下的取消按钮文字颜色 (@image#1:Clipboard_Screenshot.png) */ +// // color: $color-1E1E1E; +// border-radius: 8px; +// min-height: 40px; +// padding: 0 20px !important; +// /* 与主题模块冲突：强制白色背景会覆盖主题深色模式下的取消按钮背景 (@image#1:Clipboard_Screenshot.png) */ +// // background-color: $color-white; +// width: auto !important; +// +// &:hover { +// /* 与主题模块冲突：强制浅色悬停背景会覆盖主题深色模式下的按钮悬停样式 (@image#1:Clipboard_Screenshot.png) */ +// // background-color: $color-secondary-bg; +// } +// +// &:focus { +// border: 1px solid $color-E7495E; +// } +// +// @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 { - padding: 0 29px !important; -} +// [YUTHON] 注释掉 dashboard 对全局 .o_form_button_save 的 padding 硬编码（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; diff --git a/ks_dashboard_ninja/static/src/scss/dark_mode.scss b/ks_dashboard_ninja/static/src/scss/dark_mode.scss new file mode 100644 index 0000000..bd2e5ff --- /dev/null +++ b/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; +} diff --git a/ks_dashboard_ninja/static/src/scss/main.scss b/ks_dashboard_ninja/static/src/scss/main.scss index dc1a851..5fc42e0 100644 --- a/ks_dashboard_ninja/static/src/scss/main.scss +++ b/ks_dashboard_ninja/static/src/scss/main.scss @@ -3,4 +3,5 @@ @import "./overview.scss"; @import "./header.scss"; @import "./screen.scss"; -@import "./modal.scss"; \ No newline at end of file +@import "./modal.scss"; +@import "./dark_mode.scss"; \ No newline at end of file diff --git a/udoo_om_ux/static/src/core/dialog/view.xml b/udoo_om_ux/static/src/core/dialog/view.xml index 093bed5..5d618af 100644 --- a/udoo_om_ux/static/src/core/dialog/view.xml +++ b/udoo_om_ux/static/src/core/dialog/view.xml @@ -3,11 +3,6 @@
- +