/* ========================================================================== VCM Office – Dark Theme Activated via [data-theme="dark"] on , toggled by site.js ========================================================================== */ /* ---------- Palette (scoped to dark mode) ---------- */ [data-theme="dark"] { --dark-bg: #1a1d23; --dark-surface: #22262e; --dark-surface-2: #2a2f38; --dark-border: #3a3f4a; --dark-text: #e2e6ec; --dark-text-muted: #8a94a6; --dark-input-bg: #2a2f38; --dark-hover: #313640; --dark-shadow: rgba(0, 0, 0, .35); } /* ---------- Global ---------- */ [data-theme="dark"] body { background-color: var(--dark-bg); color: var(--dark-text); } [data-theme="dark"] *, [data-theme="dark"] *::before, [data-theme="dark"] *::after { transition: background-color .2s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; } /* ---------- Sidenav ---------- */ [data-theme="dark"] .sidenav.bg-white, [data-theme="dark"] .sidenav.navbar-light { background-color: var(--dark-surface) !important; } [data-theme="dark"] .sidenav .navbar-brand-img { filter: brightness(1.15); } [data-theme="dark"] .sidenav .nav-link { color: var(--dark-text) !important; } [data-theme="dark"] .sidenav .nav-link:hover { background-color: var(--dark-hover) !important; } [data-theme="dark"] .sidenav .nav-link.active { /* keep brand active colour */ } [data-theme="dark"] .sidenav-header { border-bottom-color: var(--dark-border); } [data-theme="dark"] .scrollbar-inner > .scroll-element .scroll-bar { background-color: var(--dark-border); } /* ---------- Top Navbar ---------- */ [data-theme="dark"] .navbar-top.bg-primary { background-color: var(--dark-surface) !important; border-bottom-color: var(--dark-border) !important; } /* ---------- Header / Page banner ---------- */ [data-theme="dark"] .header.bg-primary { background-color: var(--dark-surface-2) !important; } [data-theme="dark"] .bg-gradient-primary { background: linear-gradient(87deg, var(--dark-surface-2) 0%, var(--dark-surface) 100%) !important; } /* ---------- Main content area ---------- */ [data-theme="dark"] .main-content { background-color: var(--dark-bg); } /* ---------- Cards ---------- */ [data-theme="dark"] .card { background-color: var(--dark-surface); border-color: var(--dark-border); box-shadow: 0 0 2rem 0 var(--dark-shadow); color: var(--dark-text); } [data-theme="dark"] .card-header { background-color: var(--dark-surface); border-bottom-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .card-footer { background-color: var(--dark-surface); border-top-color: var(--dark-border); } [data-theme="dark"] .card .card-body { color: var(--dark-text); } [data-theme="dark"] .bg-secondary { background-color: var(--dark-surface) !important; } [data-theme="dark"] .bg-default { background-color: var(--dark-surface) !important; } /* ---------- Tables ---------- */ [data-theme="dark"] .table { color: var(--dark-text); } [data-theme="dark"] .table thead th { background-color: var(--dark-surface-2); border-bottom-color: var(--dark-border); color: var(--dark-text-muted); } [data-theme="dark"] .table td, [data-theme="dark"] .table th { border-top-color: var(--dark-border); } [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--dark-surface-2); } [data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--dark-hover); } [data-theme="dark"] .table-flush td, [data-theme="dark"] .table-flush th { border-color: var(--dark-border); } /* ---------- Forms ---------- */ [data-theme="dark"] .form-control { background-color: var(--dark-input-bg); border-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .form-control:focus { background-color: var(--dark-input-bg); border-color: var(--main); color: var(--dark-text); box-shadow: 0 0 0 .2rem rgba(26, 102, 163, .25); } [data-theme="dark"] .form-control::placeholder { color: var(--dark-text-muted); } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly] { background-color: var(--dark-surface); opacity: .7; } [data-theme="dark"] select.form-control { background-color: var(--dark-input-bg); color: var(--dark-text); } [data-theme="dark"] .input-group-text { background-color: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text-muted); } [data-theme="dark"] .custom-select { background-color: var(--dark-input-bg); border-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .custom-control-label::before { background-color: var(--dark-input-bg); border-color: var(--dark-border); } /* ---------- Buttons ---------- */ [data-theme="dark"] .btn-neutral, [data-theme="dark"] .btn-outline-default, [data-theme="dark"] .btn-white { background-color: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text) !important; } [data-theme="dark"] .btn-neutral:hover, [data-theme="dark"] .btn-outline-default:hover, [data-theme="dark"] .btn-white:hover { background-color: var(--dark-hover); border-color: var(--dark-border); color: #fff !important; } [data-theme="dark"] .btn-secondary { background-color: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); } /* ---------- Dropdowns ---------- */ [data-theme="dark"] .dropdown-menu { background-color: var(--dark-surface); border-color: var(--dark-border); box-shadow: 0 50px 100px var(--dark-shadow); } [data-theme="dark"] .dropdown-item { color: var(--dark-text); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--dark-hover); color: #fff; } [data-theme="dark"] .dropdown-divider { border-top-color: var(--dark-border); } /* ---------- Modals ---------- */ [data-theme="dark"] .modal-content { background-color: var(--dark-surface); border-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .modal-header { border-bottom-color: var(--dark-border); } [data-theme="dark"] .modal-footer { border-top-color: var(--dark-border); } [data-theme="dark"] .close { color: var(--dark-text); text-shadow: none; } /* ---------- Nav pills / tabs ---------- */ [data-theme="dark"] .nav-pills .nav-link { background-color: var(--dark-surface-2); color: var(--dark-text); } [data-theme="dark"] .nav-pills .nav-link:hover { background-color: var(--dark-hover); color: #fff; } [data-theme="dark"] .nav-tabs .nav-link { border-color: transparent; color: var(--dark-text-muted); } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--dark-surface); border-color: var(--dark-border) var(--dark-border) var(--dark-surface); color: var(--dark-text); } [data-theme="dark"] .nav-tabs { border-bottom-color: var(--dark-border); } /* ---------- Pagination ---------- */ [data-theme="dark"] .page-link { background-color: var(--dark-surface); border-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .page-link:hover { background-color: var(--dark-hover); border-color: var(--dark-border); color: #fff; } /* ---------- Badges ---------- */ [data-theme="dark"] .badge-default { background-color: var(--dark-surface-2); color: var(--dark-text); } /* ---------- Breadcrumbs ---------- */ [data-theme="dark"] .breadcrumb { background-color: transparent; } [data-theme="dark"] .breadcrumb-item, [data-theme="dark"] .breadcrumb-item a { color: var(--dark-text-muted); } [data-theme="dark"] .breadcrumb-item.active { color: var(--dark-text); } /* ---------- Alerts ---------- */ [data-theme="dark"] .alert-default { background-color: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); } /* ---------- Progress bars ---------- */ [data-theme="dark"] .progress { background-color: var(--dark-surface-2); } /* ---------- List groups ---------- */ [data-theme="dark"] .list-group-item { background-color: var(--dark-surface); border-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .list-group-item:hover { background-color: var(--dark-hover); } /* ---------- Footer ---------- */ [data-theme="dark"] .footer { background-color: var(--dark-bg); border-top-color: var(--dark-border); } [data-theme="dark"] .footer .nav-link { color: var(--dark-text-muted) !important; } /* ---------- Text utilities ---------- */ [data-theme="dark"] .text-muted { color: var(--dark-text-muted) !important; } [data-theme="dark"] .text-dark { color: var(--dark-text) !important; } [data-theme="dark"] .text-body { color: var(--dark-text) !important; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] .h1, [data-theme="dark"] .h2, [data-theme="dark"] .h3, [data-theme="dark"] .h4, [data-theme="dark"] .h5, [data-theme="dark"] .h6 { color: var(--dark-text); } /* ---------- Border utilities ---------- */ [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-left, [data-theme="dark"] .border-right { border-color: var(--dark-border) !important; } [data-theme="dark"] hr { border-top-color: var(--dark-border); } /* ---------- Shadow override ---------- */ [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow-lg { box-shadow: 0 0 2rem 0 var(--dark-shadow) !important; } /* ---------- Popover & tooltip ---------- */ [data-theme="dark"] .popover { background-color: var(--dark-surface); border-color: var(--dark-border); } [data-theme="dark"] .popover-body { color: var(--dark-text); } [data-theme="dark"] .tooltip-inner { background-color: var(--dark-surface-2); color: var(--dark-text); } /* ---------- Selectize plugin (if used) ---------- */ [data-theme="dark"] .selectize-input { background-color: var(--dark-input-bg) !important; border-color: var(--dark-border) !important; color: var(--dark-text); } [data-theme="dark"] .selectize-dropdown { background-color: var(--dark-surface) !important; border-color: var(--dark-border) !important; color: var(--dark-text); } [data-theme="dark"] .selectize-dropdown .active { background-color: var(--dark-hover) !important; color: #fff; } /* ---------- DataTables (if used) ---------- */ [data-theme="dark"] .dataTables_wrapper .dataTables_length, [data-theme="dark"] .dataTables_wrapper .dataTables_filter, [data-theme="dark"] .dataTables_wrapper .dataTables_info, [data-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--dark-text-muted); } /* ---------- Calendar overrides (FullCalendar) ---------- */ [data-theme="dark"] .fc .fc-toolbar-title { color: var(--dark-text); } [data-theme="dark"] .fc .fc-col-header-cell { background-color: var(--dark-surface-2); color: var(--dark-text-muted); } [data-theme="dark"] .fc .fc-daygrid-day { background-color: var(--dark-surface); } [data-theme="dark"] .fc td, [data-theme="dark"] .fc th { border-color: var(--dark-border); } /* ---------- Froala editor (if used) ---------- */ [data-theme="dark"] .fr-box .fr-wrapper { background-color: var(--dark-input-bg) !important; color: var(--dark-text); } [data-theme="dark"] .fr-box .fr-toolbar { background-color: var(--dark-surface-2) !important; border-color: var(--dark-border) !important; } /* ---------- Chart.js canvas containers ---------- */ [data-theme="dark"] .chart { filter: brightness(.9) saturate(1.1); } /* ---------- Toggle button icon swap ---------- */ [data-theme="dark"] #theme-toggle .fa-moon::before { content: "\f185"; /* swaps to fa-sun */ } /* ---------- Scrollbar styling (Webkit) ---------- */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dark-bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: var(--dark-border); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: var(--dark-text-muted); } /* ---------- Misc ---------- */ [data-theme="dark"] .fill-default { fill: var(--dark-surface); } [data-theme="dark"] .bg-white { background-color: var(--dark-surface) !important; } [data-theme="dark"] code { background-color: var(--dark-surface-2); color: #e06c75; } [data-theme="dark"] pre { background-color: var(--dark-surface-2); color: var(--dark-text); border-color: var(--dark-border); } [data-theme="dark"] ::selection { background: rgba(26, 102, 163, .4); color: #fff; } /* ---------- Edit card (dark-mode-friendly green tint) ---------- */ [data-theme="dark"] .card-edit { background-color: #1a3a32 !important; border-color: #2a5e4a !important; } [data-theme="dark"] .card-edit .form-control { background-color: #1e3d35; border-color: #2a5e4a; } [data-theme="dark"] .card-edit h3, [data-theme="dark"] .card-edit label { color: #8fdcc8; } [data-theme="dark"] .fr-box.fr-basic .fr-element { color: white }