From 798a91f3eaf0c14883020e8b2f4135cd1f0e0aec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E9=B9=8F=E5=AE=87?= <9664676+pengyuthon@user.noreply.gitee.com> Date: Mon, 10 Aug 2026 18:00:24 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=95=99=E8=82=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/scss/ks_dashboard_ninja_dark.scss | 111 +++++++++++++++++- 1 file changed, 106 insertions(+), 5 deletions(-) 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 b0ead3e..624d3c8 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 @@ -1,14 +1,14 @@ // ============================================================ // ks_dashboard_ninja / static / src / scss / ks_dashboard_ninja_dark.scss // ------------------------------------------------------------ -// 仪表盘头部「看板」标题(仪表板名称字段)夜间模式修复。 +// 仪表盘夜间模式修复(针对 udoo_om_ux 等第三方主题)。 // -// 根因:common.scss 中 `.ks_body_class #ks_dashboard_title_label` -// 将标题设为深色文字 color:#241C1D + 浅色边框,正常模式(浅底)清晰, -// 夜间(深色底)文字与背景同色,导致「看板」标题不可见。 +// 根因:模块自带的 dark_mode.scss 依赖 body.o_dark_mode / +// [data-color-mode="dark"] 等属性选择器,而 udoo_om_ux 主题并不通过 +// 这些 class 触发夜间模式,导致大量卡片/KPI瓦片仍保留 $color-white 浅色。 // // 本文件仅注册在 web.assets_web_dark / web.assets_backend_lazy_dark, -// 仅当用户开启夜间模式时才会加载,因此颜色全部硬编码,不依赖任何 +// 仅当 Odoo 启用夜间模式时才会加载,因此颜色全部硬编码,不依赖任何 // 主题 SCSS 变量,避免跨模块编译顺序导致变量未切换成深色值。 // 深色页面底色约 #0f172a / 卡片用略亮的 slate-800 (#1e293b) 形成层次。 // ============================================================ @@ -65,3 +65,104 @@ border-color: #3b82f6 !important; } } + +// ============================================================ +// 概览页仪表盘预览卡片(.dashboard-box) +// 原 overview.scss 设 background-color: $color-white,夜间太白。 +// ============================================================ +.ks_body_class .overview-sec-dasboards .data-added .dashboard-box, +.ks_body_class .overview-sec-dasboards .dashboard-box { + background-color: #1e293b !important; + border-color: #334155 !important; + box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.35) !important; + + .dash-preview-box { + border-color: #334155 !important; + background-color: #1e293b !important; + } + + .dashboard-info { + .left { + h4, p { + color: #f1f5f9 !important; + } + } + } +} + +// ============================================================ +// 仪表盘内部 KPI / 图表瓦片容器 +// 原 chartScreen.scss/common.scss 多处使用 $color-white 做图标/卡片底。 +// ============================================================ +.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 { + background-color: #1e293b !important; + border-color: #334155 !important; + box-shadow: none !important; + + &:hover { + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35), 0 10px 10px rgba(0, 0, 0, 0.25) !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: #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; + } +} + +// ============================================================ +// 图表容器与主内容区背景 +// ============================================================ +.ks_body_class .ks_dashboard_main_content .ks_dashboard_item_content, +.ks_body_class .ks_dashboard_main_content { + background-color: #0f172a !important; +} + +.ks_body_class .ks_dashboarditem_chart_container, +.ks_body_class .ks_chart_container, +.ks_body_class .generated-cart-box, +.ks_body_class .chart-preview { + background-color: #1e293b !important; + border-color: #334155 !important; +} + +// ============================================================ +// 其他可能漏掉的白色图标按钮/小卡片 +// ============================================================ +.ks_body_class .tiles_card { + background-color: #1e293b !important; + border-color: #334155 !important; +} + +.ks_body_class .tiles_card_header { + color: #94a3b8 !important; +} + +.ks_body_class .encapsulated-kpi-tile .img-bg, +.ks_body_class .encapsulated-tile-container .ks_dashboard_icon { + svg path { + stroke: #e2e8f0 !important; + } +}