/** * CHM ERP Theme System — light, dark, and system preference. * Applied via [data-chm-theme] on . */ /* ─── Light (default) semantic tokens ─────────────────── */ :root, [data-chm-theme="light"] { --chm-bg-elevated: #ffffff; --chm-text-primary: #1c1917; --chm-text-inverse: #ffffff; --chm-input-bg: #ffffff; --chm-table-stripe: rgba(248, 250, 252, 0.9); --chm-table-hover: rgba(37, 99, 235, 0.05); --chm-modal-backdrop: rgba(28, 25, 23, 0.45); --chm-chart-grid: rgba(28, 25, 23, 0.06); --chm-chart-text: #57534e; --chm-shadow-color: rgba(28, 25, 23, 0.08); --chm-topbar-bg: #ffffff; color-scheme: light; } /* ─── Dark theme ──────────────────────────────────────── */ [data-chm-theme="dark"] { --chm-bg: #141210; --chm-bg-elevated: #1c1917; --chm-bg-subtle: #292524; --chm-surface: #1c1917; --chm-surface-elevated: #292524; --chm-surface-sunken: #141210; --chm-sidebar-bg: #1c1917; --chm-text-primary: #fafaf9; --chm-text-secondary: #d6d3d1; --chm-text-inverse: #1c1917; --chm-border-color: #3f3a36; --chm-border-strong: #57534e; --chm-border: #3f3a36; --chm-input-bg: #292524; --chm-input-border: #57534e; --chm-table-stripe: rgba(20, 18, 16, 0.5); --chm-table-hover: rgba(255, 255, 255, 0.04); --chm-modal-backdrop: rgba(0, 0, 0, 0.65); --chm-chart-grid: rgba(255, 255, 255, 0.08); --chm-chart-text: #a8a29e; --chm-shadow-color: rgba(0, 0, 0, 0.35); --chm-topbar-bg: #1c1917; --chm-sidebar-text: #e7e5e4; --chm-sidebar-muted: #a8a29e; --chm-text: #fafaf9; --chm-text-muted: #78716c; color-scheme: dark; } /* Map semantic tokens to layout surfaces */ .chm-app { background: var(--chm-bg); color: var(--chm-text-primary); } .chm-app .page-wrapper { background: var(--chm-bg); } .chm-app .page-content { color: var(--chm-text-primary); } .chm-app .topbar { background: var(--chm-topbar-bg) !important; border-bottom-color: var(--chm-border-color) !important; } .chm-app .topbar .nav-link { color: var(--chm-text-primary); } .chm-app .page-footer { background: var(--chm-bg-elevated); border-top-color: var(--chm-border-color); color: var(--chm-text-secondary); } [data-chm-theme="dark"] .chm-app .page-content .card, [data-chm-theme="dark"] .chm-card, [data-chm-theme="dark"] .chm-widget-card, [data-chm-theme="dark"] .chm-kpi-card, [data-chm-theme="dark"] .chm-activity-card { background: var(--chm-bg-elevated); border-color: var(--chm-border-color); color: var(--chm-text-primary); } [data-chm-theme="dark"] .chm-app .page-content .card .card-header, [data-chm-theme="dark"] .chm-card .card-header { background: var(--chm-bg-subtle); border-bottom-color: var(--chm-border-color); color: var(--chm-text-primary); } [data-chm-theme="dark"] .chm-app .form-control, [data-chm-theme="dark"] .chm-app .form-select, [data-chm-theme="dark"] .chm-form-floating .form-control { background: var(--chm-input-bg); border-color: var(--chm-input-border); color: var(--chm-text-primary); } [data-chm-theme="dark"] .chm-app .form-control:focus, [data-chm-theme="dark"] .chm-app .form-select:focus { background: var(--chm-input-bg); color: var(--chm-text-primary); } [data-chm-theme="dark"] .chm-app .input-group-text { background: var(--chm-bg-subtle); border-color: var(--chm-input-border); color: var(--chm-text-secondary); } [data-chm-theme="dark"] .chm-app .page-content .table thead th { background: var(--chm-bg-subtle) !important; color: var(--chm-text-secondary) !important; border-color: var(--chm-border-color) !important; } [data-chm-theme="dark"] .chm-app .page-content .table tbody td { border-color: var(--chm-border-color); color: var(--chm-text-primary); } [data-chm-theme="dark"] .chm-app .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--chm-table-stripe); } [data-chm-theme="dark"] .chm-app .page-content .table tbody tr:hover { background: var(--chm-table-hover); } [data-chm-theme="dark"] .chm-app .modal-content { background: var(--chm-bg-elevated); border-color: var(--chm-border-color); color: var(--chm-text-primary); } [data-chm-theme="dark"] .chm-app .modal-header, [data-chm-theme="dark"] .chm-app .modal-footer { background: var(--chm-bg-subtle); border-color: var(--chm-border-color); } [data-chm-theme="dark"] .chm-app .dropdown-menu { background: var(--chm-bg-elevated); border-color: var(--chm-border-color); } [data-chm-theme="dark"] .chm-app .dropdown-item { color: var(--chm-text-primary); } [data-chm-theme="dark"] .chm-app .dropdown-item:hover { background: var(--chm-bg-subtle); } [data-chm-theme="dark"] .chm-app .dataTables_wrapper .dataTables_length select, [data-chm-theme="dark"] .chm-app .dataTables_wrapper .dataTables_filter input { background: var(--chm-input-bg); border-color: var(--chm-input-border); color: var(--chm-text-primary); } [data-chm-theme="dark"] .chm-sidebar-search-inner { background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.12); } [data-chm-theme="dark"] .scrolling-verse marquee { background-color: var(--chm-bg-subtle); color: var(--chm-text-primary); } /* Theme switcher control */ .chm-theme-switcher .dropdown-menu { min-width: 11rem; padding: 0.375rem; } .chm-theme-option { display: flex; align-items: center; gap: 0.625rem; width: 100%; border: none; background: transparent; border-radius: var(--chm-radius-xs, 6px); padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--chm-text-primary); text-align: left; } .chm-theme-option:hover, .chm-theme-option.active { background: var(--chm-bg-subtle, #eef1f6); } .chm-theme-option.active { font-weight: 600; color: var(--chm-navy, #1e3a5f); } [data-chm-theme="dark"] .chm-theme-option.active { color: var(--chm-gold, #c8a951); } /* Accent color hooks (future expansion) */ [data-chm-accent="gold"] { --chm-accent: var(--chm-gold, #c8a951); } [data-chm-accent="teal"] { --chm-accent: #0aa2c0; } [data-chm-accent="green"] { --chm-accent: #198754; }