/* ============================================================= theme-dark.css — 深色模式（試點）範圍：應用外殼（工具列/底色）＋主選單 FontIndex ＋通用元件（卡片/表格/表單/Modal）。僅在時生效；預設淺色完全不受影響。 ⚠ 本檔不放任何顏色「值」(hex)，只放「哪個元件用哪個 token」的對應。所有色值集中在 _Layout.cshtml 的 :root（淺色）與 html[data-theme="dark"]（深色）token 區塊，要改配色請改那裡。陰影用的 rgba 屬視覺效果（非主題色），保留於此。 ============================================================= */ /* ---------- 基本面 ---------- */ html[data-theme="dark"] body { background: var(--page-bg); color: var(--ui-text); /* Bootstrap 基礎變數改深色：避免 var(--bs-body-bg,#fff) / var(--bs-body-color) 的元件（如 .lookup-name-btn）在深色下還是白底，或白底配亮字看不見。 */ --bs-secondary-color: var(--ui-text-muted); --bs-body-color: var(--ui-text); --bs-body-bg: var(--ui-surface); --bs-secondary-bg: var(--ui-surface-2); --bs-tertiary-bg: var(--ui-surface-2); } html[data-theme="dark"] ::placeholder { color: var(--ui-text-muted) !important; opacity: 1; } html[data-theme="dark"] hr { border-color: var(--ui-border); } /* ---------- 應用工具列（底色寫死 #e8f0f8，需明確覆蓋） ---------- */ html[data-theme="dark"] .app-toolbar { background: var(--ui-surface-2) !important; border-bottom: 1px solid var(--ui-border) !important; box-shadow: 0 2px 8px rgba(0,0,0,.35) !important; } html[data-theme="dark"] .app-toolbar, html[data-theme="dark"] .app-toolbar .toolbar-title-left, html[data-theme="dark"] .app-toolbar .toolbar-brand .label, html[data-theme="dark"] .app-toolbar .toolbar-user .label, html[data-theme="dark"] .app-toolbar #toolbarUserName, html[data-theme="dark"] .app-toolbar .toolbar-user .value-box { color: var(--ui-text) !important; } html[data-theme="dark"] .app-toolbar .toolbar-help-btn, html[data-theme="dark"] .app-toolbar .toolbar-home-btn, html[data-theme="dark"] .app-toolbar .palette-picker-btn, html[data-theme="dark"] .app-toolbar .toolbar-user-toggle { background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; } html[data-theme="dark"] .app-toolbar .toolbar-help-btn:hover, html[data-theme="dark"] .app-toolbar .toolbar-home-btn:hover, html[data-theme="dark"] .app-toolbar .palette-picker-btn:hover, html[data-theme="dark"] .app-toolbar .toolbar-user-toggle:hover { background: var(--ui-hover) !important; } /* 調色盤下拉本身（深色下避免白色彈窗） */ html[data-theme="dark"] .palette-dropdown { background: var(--ui-surface); border-color: var(--ui-border); box-shadow: 0 8px 24px rgba(0,0,0,.5); } html[data-theme="dark"] .palette-dropdown-title, html[data-theme="dark"] .palette-custom-label { color: var(--ui-text); } html[data-theme="dark"] .palette-reset-btn { background: var(--ui-surface-2); color: var(--ui-text); border-color: var(--ui-border); } /* ---------- 通用 Bootstrap 容器 ---------- */ html[data-theme="dark"] .card, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .list-group { background-color: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); } html[data-theme="dark"] .list-group-item { background-color: transparent; color: var(--ui-text); border-color: var(--ui-border); } html[data-theme="dark"] .dropdown-item { color: var(--ui-text); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--ui-hover); color: var(--ui-text); } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--ui-border); } /* 表格 */ html[data-theme="dark"] .table { --bs-table-bg: var(--ui-surface); --bs-table-color: var(--ui-text); --bs-table-border-color: var(--ui-border); --bs-table-hover-bg: var(--ui-hover); --bs-table-hover-color: var(--ui-text); --bs-table-active-bg: var(--ui-accent-soft); --bs-table-active-color: var(--ui-text); color: var(--ui-text); } html[data-theme="dark"] .table > :not(caption) > * > * { background-color: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); } html[data-theme="dark"] .table thead th { background-color: var(--ui-surface-2); } html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--ui-hover); } /* 表單 */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: var(--ui-input-bg); color: var(--ui-text); border-color: var(--ui-border); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: var(--ui-input-bg); color: var(--ui-text); border-color: var(--ui-accent); box-shadow: 0 0 0 .15rem rgba(59,130,246,.25); } html[data-theme="dark"] .input-group-text { background-color: var(--ui-surface-2); color: var(--ui-text-muted); border-color: var(--ui-border); } /* disabled / readonly 欄位：瀏覽器對 disabled input 用 -webkit-text-fill-color（灰）渲染文字， color 蓋不掉，導致狀態欄（單據狀態/簽核狀態等）字偏暗。明確指定 text-fill-color 才會亮。 */ html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly], html[data-theme="dark"] .form-select:disabled, html[data-theme="dark"] input:disabled, html[data-theme="dark"] input[readonly], html[data-theme="dark"] select:disabled, html[data-theme="dark"] textarea:disabled, html[data-theme="dark"] textarea[readonly] { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; background-color: var(--ui-surface-2); } /* 唯讀的 lookup 名稱欄（.dict-readonly，如作業者「Admin」）也比照純白，維持一致 */ html[data-theme="dark"] .lookup-name-btn.dict-readonly { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* 表單標籤 / Bootstrap 文字工具類 —— 原為深色，在深色面板/對話框上隱形（如查詢視窗欄位標籤 .form-label.text-muted） */ html[data-theme="dark"] .form-label, html[data-theme="dark"] .col-form-label, html[data-theme="dark"] .form-check-label { color: var(--ui-text); } html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-secondary { color: var(--ui-text-muted) !important; } html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-body { color: var(--ui-text) !important; } /* outline 次要按鈕（進階/預設等）—— 深灰文字在深色上偏暗 */ html[data-theme="dark"] .btn-outline-secondary { color: var(--ui-text); border-color: var(--ui-border); } html[data-theme="dark"] .btn-outline-secondary:hover { background: var(--ui-hover); color: var(--ui-text); border-color: var(--ui-accent); } /* ---------- 主選單 FontIndex ---------- */ html[data-theme="dark"] .erp-sidebar, html[data-theme="dark"] .erp-card { background: var(--ui-surface) !important; border: 1px solid var(--ui-border); box-shadow: 0 2px 10px rgba(0,0,0,.4); color: var(--ui-text); } html[data-theme="dark"] .erp-sidebar h4 { color: var(--ui-text); } /* Level 0 模組列 */ html[data-theme="dark"] .sidebar-mod0-link { background: var(--ui-surface-2); color: var(--ui-text); } html[data-theme="dark"] .sidebar-mod0-link:hover { background: var(--ui-hover); color: var(--ui-text); box-shadow: 0 2px 6px rgba(0,0,0,.4); } html[data-theme="dark"] .sidebar-mod0-link.mod0-selected { background: var(--ui-accent-soft); border-left-color: var(--ui-accent); } /* Level 1 子項目 */ html[data-theme="dark"] .sidebar-sub-list { border-left-color: var(--ui-border); } html[data-theme="dark"] .sidebar-sub-list a { color: var(--ui-text-muted); } html[data-theme="dark"] .sidebar-sub-list a:hover { background: var(--ui-hover); color: var(--ui-text); } /* 功能列表 / 我的最愛內部標題列、欄位列、分隔線 */ html[data-theme="dark"] #functionListTitleBar, html[data-theme="dark"] #functionListColumnHeader { background: var(--ui-surface-2) !important; color: var(--ui-text) !important; } html[data-theme="dark"] #functionListDivider { background: var(--ui-border) !important; } html[data-theme="dark"] .erp-list-group .list-group-item { background: transparent; color: var(--ui-text); } html[data-theme="dark"] .erp-list-group .list-group-item:hover { background: var(--ui-hover); } html[data-theme="dark"] .erp-list-group .list-group-item a { color: var(--ui-text); } /* 下方面板（簽核待審/訊息未讀…） */ html[data-theme="dark"] .menu-lower-panel { background: linear-gradient(135deg, var(--ui-surface-2) 0%, var(--ui-surface) 100%) !important; border-color: var(--ui-border) !important; } /* 標題文字（系統模組 / 功能列表 / 我的最愛等深色字） */ html[data-theme="dark"] .erp-card h3, html[data-theme="dark"] .erp-card h4, html[data-theme="dark"] .erp-card h5 { color: var(--ui-text); } /* LOGO 為黑色 PNG —— 深色模式下用 filter 轉成白色（免另製白色圖檔） */ html[data-theme="dark"] .toolbar-brand img { filter: brightness(0) invert(1); } /* ============================================================ 麵包屑（左上作業路徑）—— 原色 #1f3a8a/#64748b 在深色工具列上幾乎看不見，改用主題文字色：目前作業用亮色、上層用 muted、分隔線 muted。 ============================================================ */ html[data-theme="dark"] .toolbar-breadcrumb .breadcrumb-current { color: var(--ui-text) !important; } html[data-theme="dark"] .toolbar-breadcrumb .breadcrumb-link, html[data-theme="dark"] .toolbar-breadcrumb .breadcrumb-text { color: var(--ui-text-muted) !important; } html[data-theme="dark"] .toolbar-breadcrumb .breadcrumb-sep { color: var(--ui-text-muted) !important; } html[data-theme="dark"] .toolbar-breadcrumb .breadcrumb-link:hover { color: var(--ui-accent) !important; } html[data-theme="dark"] .toolbar-title-left { color: var(--ui-text) !important; } /* ============================================================ 選取列 —— 原 #cfe8ff 淺藍在深色下「淺底淺字」糊掉，改深藍強調底 + 亮字。選取時整列套同一個強調底，不保留欄位原底色。 ============================================================ */ html[data-theme="dark"] #mainGrid tbody tr.selected-row, html[data-theme="dark"] #mainGrid tbody tr.selected-row td { --sg-cell-bg: var(--ui-accent-soft); background-color: var(--ui-accent-soft) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } /* lookup 下拉的選取項 */ html[data-theme="dark"] .mmd-lookup-item.selected { background: var(--ui-accent-soft) !important; color: var(--ui-text) !important; } /* grid-table（MultiGrid / MasterDetail 等）選取列：原 #d1e7ff 淺藍 → 深藍強調底 + 亮字 */ html[data-theme="dark"] table.grid-table tbody tr.selected-row, html[data-theme="dark"] table.grid-table tbody tr.selected-row td { background-color: var(--ui-accent-soft) !important; border-color: var(--ui-accent) !important; color: var(--ui-text) !important; } /* grid-table / table-hover 的 hover 列：原 #e8f4ff/#f1f5ff 淺藍 → 深色 hover 底。 box-shadow:none 用來消除 Bootstrap .table-hover 的 inset 疊色（否則會在底色上再蓋一層淺藍）。*/ html[data-theme="dark"] table.grid-table tbody tr:hover, html[data-theme="dark"] table.grid-table tbody tr:hover td, html[data-theme="dark"] .table-hover tbody tr:hover, html[data-theme="dark"] .table-hover tbody tr:hover > * { background-color: var(--ui-hover) !important; box-shadow: none !important; } /* 選取列被 hover 時：維持深藍強調底，不被 hover 淺色覆蓋（指定 :hover 提高特異度）。 */ html[data-theme="dark"] table.grid-table tbody tr.selected-row:hover, html[data-theme="dark"] table.grid-table tbody tr.selected-row:hover td, html[data-theme="dark"] #mainGrid tbody tr.selected-row:hover, html[data-theme="dark"] #mainGrid tbody tr.selected-row:hover td { background-color: var(--ui-accent-soft) !important; color: var(--ui-text) !important; box-shadow: none !important; } /* 欄位字典樹選取項（原 #bfdbfe 淺藍） */ html[data-theme="dark"] .fd-tree-leaf.selected { background: var(--ui-accent-soft) !important; color: var(--ui-text) !important; } /* ============================================================ 工具列按鈕 —— 一般按鈕文字原為深藍 #2a4a7a，在深色底上隱形，改亮字。 primary(藍)、add(綠)、cancel(紅) 等彩色按鈕以 :not 排除，維持原語意色。 ============================================================ */ html[data-theme="dark"] .toolbar-btn:not(.primary), html[data-theme="dark"] .top-toolbar .toolbar-btn-icon:not(.toolbar-btn-add):not(.toolbar-btn-cancel) { color: var(--ui-text); border-color: var(--ui-border); /* Bootstrap .btn 的 active 狀態變數原為淺底深藍字，改深色 */ --bs-btn-active-bg: var(--ui-surface-2); --bs-btn-active-border-color: var(--ui-border); --bs-btn-active-color: var(--ui-text); } /* hover / focus / active 高亮：原 #eef3fb 淺藍（含點擊後保持 focus 的情況）→ 深色 hover 底 */ html[data-theme="dark"] .toolbar-btn:not(.primary):not(:disabled):hover, html[data-theme="dark"] .toolbar-btn:not(.primary):not(:disabled):focus, html[data-theme="dark"] .toolbar-btn:not(.primary):not(:disabled):focus-visible, html[data-theme="dark"] .toolbar-btn:not(.primary):not(:disabled):active, html[data-theme="dark"] .top-toolbar .toolbar-btn-icon:not(.toolbar-btn-add):not(.toolbar-btn-cancel):not(:disabled):hover, html[data-theme="dark"] .top-toolbar .toolbar-btn-icon:not(.toolbar-btn-add):not(.toolbar-btn-cancel):not(:disabled):focus { background: var(--ui-hover) !important; border-color: var(--ui-accent) !important; color: var(--ui-text) !important; } /* ============================================================ 左側自訂按鈕 .fab（單據作業 action-rail）—— 原淺底藍字 #f8f9fb/#1f5fbf，深色改深面板底 + 亮字。彩色狀態鈕(.fab-red/.fab-blue)以 :not 排除維持語意色。 ============================================================ */ html[data-theme="dark"] .fab:not(.fab-red):not(.fab-blue) { background: var(--ui-surface-2); color: var(--ui-text); border-color: var(--ui-border); box-shadow: 0 2px 8px rgba(0,0,0,.35); } html[data-theme="dark"] .fab:not(.fab-red):not(.fab-blue):hover { background: var(--ui-hover); border-color: var(--ui-accent); } /* ============================================================ Bootstrap 頁籤(.nav-tabs)—— 深色主題化。原本作用中頁籤深藍字(#1b3f8a)配深底會隱形；非作用中頁籤淺藍亦偏暗。 ============================================================ */ html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--ui-border); } html[data-theme="dark"] .nav-tabs .nav-link { color: var(--ui-text-muted); background: transparent; border-color: transparent; } html[data-theme="dark"] .nav-tabs .nav-link:hover { color: var(--ui-text); border-color: var(--ui-border) var(--ui-border) transparent; } html[data-theme="dark"] .nav-tabs .nav-link.active { color: var(--ui-text) !important; background: var(--ui-surface) !important; border-color: var(--ui-border) var(--ui-border) var(--ui-surface) !important; } /* ============================================================ 可編輯 / F4 查詢欄的「亮黃高亮」—— 深色保留亮黃底，文字改深色（--ui-edit-text）。亮黃底配深色模式預設的亮色文字會「淺底淺字」不可讀，故只改文字為深色。注意：表單欄位字典的 editColor 是 inline !important（CSS 蓋不掉），由 _Layout 的 JS 處理。 ============================================================ */ /* 單一 Grid：F4 查詢欄 */ html[data-theme="dark"] #mainGrid tbody td.sg-lookup-td, html[data-theme="dark"] #mainGrid tbody td.sg-lookup-td .cell-edit, html[data-theme="dark"] .edit-mode #mainGrid tbody td.sg-lookup-td, html[data-theme="dark"] .edit-mode #mainGrid tbody td.sg-lookup-td .cell-edit { background: var(--ui-edit-bg) !important; color: var(--ui-edit-text) !important; } /* 明細表格(.erp-table，含單據/多分頁/master-detail)：lookup 欄、focus 高亮、新增列。不綁特定 wrapper，讓所有明細表都套到。*/ html[data-theme="dark"] .erp-table td.lookup-cell .cell-view, html[data-theme="dark"] .erp-table td.lookup-cell .cell-edit, html[data-theme="dark"] .erp-table td.lookup-cell { background: var(--ui-edit-bg) !important; color: var(--ui-edit-text) !important; } html[data-theme="dark"] .erp-table .cell-edit:focus { background: var(--ui-edit-soft) !important; color: var(--ui-edit-text) !important; } /* 新增但未儲存的列 */ html[data-theme="dark"] .erp-table tbody tr[data-state="added"], html[data-theme="dark"] .erp-table tbody tr[data-state="added"] td { background-color: var(--ui-edit-soft) !important; color: var(--ui-edit-text) !important; } /* Modal / 表格選取列（追蹤、異動紀錄、夾檔）—— 改用強調淡色，與其餘選取列一致 */ html[data-theme="dark"] #linkTraceModal tbody tr.lt-row-selected td, html[data-theme="dark"] #updateLogModal tbody tr.ul-row-selected td, html[data-theme="dark"] #attachmentGridContainer .erp-table tbody tr.row-selected td { background: var(--ui-accent-soft) !important; color: var(--ui-text) !important; } /* 唯讀格文字：深色下用亮色（唯讀的區別來自較深的儲存格底色，不需再靠調暗文字，否則值會「灰灰的」看不清）。注意：部分明細樣板（如 _MultiTabDetail）對 .cell-view.readonly-cell 寫死了 color:#6c757d 且特異度高，故下方用對應的高特異度選擇器覆蓋。淺底儲存格(editColor)的文字仍由 _Layout 的 JS 以 inline important 設成深色。 */ html[data-theme="dark"] .readonly-cell { color: var(--ui-text) !important; } html[data-theme="dark"] .erp-table td .cell-view.readonly-cell, html[data-theme="dark"] .erp-table td .cell-edit.readonly-cell, html[data-theme="dark"] #mainGrid td .cell-view.readonly-cell, html[data-theme="dark"] #mainGrid td .cell-edit.readonly-cell, html[data-theme="dark"] .mmd-wrapper .readonly-cell { color: var(--ui-text) !important; } html[data-theme="dark"] #mainGrid tbody tr.selected-row td, html[data-theme="dark"] #mainGrid tbody tr.selected-row td.readonly-td, html[data-theme="dark"] #mainGrid tbody tr.selected-row td.sg-lookup-td, html[data-theme="dark"] #mainGrid tbody tr.selected-row td.lookup-cell, html[data-theme="dark"] #mainGrid tbody tr.selected-row td .cell-view, html[data-theme="dark"] #mainGrid tbody tr.selected-row td .cell-edit, html[data-theme="dark"] #mainGrid tbody tr.selected-row td .readonly-cell, html[data-theme="dark"] #mainGrid tbody tr.selected-row td .cell-edit.form-control[readonly] { --sg-cell-bg: var(--ui-accent-soft); --bs-table-bg-state: transparent; --bs-table-bg-type: transparent; --bs-table-accent-bg: transparent; background: var(--ui-accent-soft) !important; background-color: var(--ui-accent-soft) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; box-shadow: none !important; } html[data-theme="dark"] #mainGrid tbody tr.selected-row td.active-cell { outline: none !important; box-shadow: none !important; } html[data-theme="dark"] #mainGrid tbody tr.selected-row td .cell-edit:focus, html[data-theme="dark"] #mainGrid tbody tr.selected-row td .cell-edit.form-control:focus { outline: none !important; box-shadow: none !important; } /* ============================================================ MasterMultiDetail 樣板（.mmd-wrapper）—— 用 .mmd- 前綴 class，需另外對應。 ============================================================ */ /* 黃 F4 查詢欄（原 #fff3b0）→ 亮黃底 + 深字 */ html[data-theme="dark"] .mmd-wrapper table tbody td.mmd-lookup-td, html[data-theme="dark"] .mmd-wrapper.mmd-editing table tbody td.mmd-lookup-td { background: var(--ui-edit-bg) !important; color: var(--ui-edit-text) !important; } html[data-theme="dark"] .mmd-wrapper td.mmd-lookup-td .cell-view, html[data-theme="dark"] .mmd-wrapper td.mmd-lookup-td .cell-edit { color: var(--ui-edit-text) !important; } /* 選取列（原 #d1e7ff 淺藍）→ 深藍強調底 + 亮字；黃查詢欄以 :not 維持亮黃 */ html[data-theme="dark"] .mmd-wrapper tbody tr.selected, html[data-theme="dark"] .mmd-wrapper tbody tr.selected td:not(.mmd-lookup-td), html[data-theme="dark"] .mmd-wrapper.mmd-editing tbody tr.selected td:not(.mmd-lookup-td), html[data-theme="dark"] .mmd-master-table tbody tr.selected td:not(.mmd-lookup-td), html[data-theme="dark"] .mmd-detail-table tbody tr.selected td:not(.mmd-lookup-td), html[data-theme="dark"] .mmd-grid tbody tr.selected td:not(.mmd-lookup-td) { background: var(--ui-accent-soft) !important; background-color: var(--ui-accent-soft) !important; border-color: var(--ui-accent) !important; color: var(--ui-text) !important; } /* hover 列（原 #e8f4ff 淺藍）→ 深色 hover */ html[data-theme="dark"] .mmd-grid tbody tr:hover, html[data-theme="dark"] .mmd-wrapper tbody tr:hover td:not(.mmd-lookup-td) { background: var(--ui-hover) !important; box-shadow: none !important; } /* lookup 下拉（原 #fff/#e8f0ff/#d0e4ff 淺色、唯讀項 #555 暗字）→ 深色 + 亮字 */ html[data-theme="dark"] .mmd-lookup-dd { background: var(--ui-surface) !important; border-color: var(--ui-border) !important; color: var(--ui-text); } html[data-theme="dark"] .mmd-lookup-search { background: var(--ui-surface-2); color: var(--ui-text); border-bottom-color: var(--ui-border); } html[data-theme="dark"] .mmd-lookup-dd .mmd-lookup-item, html[data-theme="dark"] .mmd-lookup-dd[data-readonly="1"] .mmd-lookup-item { color: var(--ui-text) !important; } html[data-theme="dark"] .mmd-lookup-item:hover, html[data-theme="dark"] .mmd-lookup-item:focus, html[data-theme="dark"] .mmd-lookup-dd[data-readonly="1"] .mmd-lookup-item:hover, html[data-theme="dark"] .mmd-lookup-dd[data-readonly="1"] .mmd-lookup-item:focus { background: var(--ui-hover) !important; } html[data-theme="dark"] .mmd-lookup-item.selected { background: var(--ui-accent-soft) !important; color: var(--ui-text) !important; } /* ============================================================ 其他樣板共用的 lookup 下拉清單（md / bill / crs / ps）—— 同樣白底 + #555/#999 暗字，統一改深色面板 + 亮字。這些多由各頁 JS 注入