@@ -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 : 0 px 4 px 12 px 0 px 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 : 1 px solid $dm-border !important ;
box-shadow : 0 px 4 px 20 px 0 px 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 : 1 px 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 14 px 28 px rgba ( 0 , 0 , 0 , 0 .4 ) , 0 10 px 10 px 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 : 0 px 0 px 10 px 0 px 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 : 1 px solid $dm-border !important ;
box-shadow : 0 4 px 12 px 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 ;
}
李鹏宇