/* ============================================================ Dark Mode theme overrides. Activated by setting data-theme="dark" on (see index.html inline script + MainLayout). Loaded last so its rules win the cascade against bootstrap.min.css, theme.min.css, and the other axoffice-*.css files for matching specificity. ============================================================ */ [data-theme="dark"] { --ax-bg: #15171c; --ax-surface: #1f222a; --ax-surface-alt: #262a33; --ax-surface-hover: #2c313c; --ax-border: #383d48; --ax-text: #e4e6eb; --ax-text-muted: #9aa1ad; --white: var(--ax-surface); --light: var(--ax-surface-alt); --dark: var(--ax-text); --gray: var(--ax-text-muted); --gray-dark: var(--ax-surface-alt); } /* ---------- Base / layout ---------- */ [data-theme="dark"] html, [data-theme="dark"] body { background-color: var(--ax-bg); color: var(--ax-text); } [data-theme="dark"] a { color: #5b9bf5; } [data-theme="dark"] hr, [data-theme="dark"] .dropdown-divider { border-color: var(--ax-border); } [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-right, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-left { border-color: var(--ax-border) !important; } [data-theme="dark"] .text-muted { color: var(--ax-text-muted) !important; } [data-theme="dark"] .text-dark, [data-theme="dark"] .text-body { color: var(--ax-text) !important; } [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light { background-color: var(--ax-surface) !important; color: var(--ax-text); } [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow-lg { box-shadow: 0 .15rem 1.75rem 0 rgba(0, 0, 0, .5) !important; } /* Sidebar / top bar (MainLayout.razor.css) */ [data-theme="dark"] .top-row { background-color: var(--ax-surface) !important; border-bottom: 1px solid var(--ax-border) !important; } /* MyExpenses.razor sticky filter bar uses an inline light background */ [data-theme="dark"] .myexpenses-filter-bar { background-color: var(--ax-bg) !important; } /* ---------- Sidebar nav menu (NavMenu.razor, "Dashkit" navbar-light) ---------- */ [data-theme="dark"] .navbar-light { background-color: var(--ax-surface); border-color: var(--ax-border); } [data-theme="dark"] .navbar-light .navbar-brand, [data-theme="dark"] .navbar-light .navbar-brand:focus, [data-theme="dark"] .navbar-light .navbar-brand:hover { color: var(--ax-text); } [data-theme="dark"] .navbar-light .navbar-nav .nav-link { color: var(--ax-text-muted); } [data-theme="dark"] .navbar-light .navbar-nav .nav-link:focus, [data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover, [data-theme="dark"] .navbar-light .navbar-nav .active > .nav-link, [data-theme="dark"] .navbar-light .navbar-nav .nav-link.active, [data-theme="dark"] .navbar-light .navbar-nav .nav-link.show, [data-theme="dark"] .navbar-light .navbar-nav .show > .nav-link { color: var(--ax-text); } [data-theme="dark"] .navbar-nav .nav-link.active, [data-theme="dark"] .navbar-light .navbar-nav .nav-link.active { background-color: var(--ax-surface-hover); } [data-theme="dark"] .navbar-light .navbar-heading { color: var(--ax-text-muted); } [data-theme="dark"] .navbar-light .navbar-divider, [data-theme="dark"] .navbar-light .navbar-collapse::before { border-color: var(--ax-border); } [data-theme="dark"] .navbar-light .navbar-user { border-top-color: var(--ax-border); } [data-theme="dark"] .navbar-light .navbar-user-link { color: var(--ax-text-muted); } [data-theme="dark"] .navbar-light .navbar-user-link:focus, [data-theme="dark"] .navbar-light .navbar-user-link:hover { color: var(--ax-text); } [data-theme="dark"] .navbar-light .navbar-toggler { color: var(--ax-text-muted); } [data-theme="dark"] .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%239aa1ad' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* ---------- Cards, panels, list groups ---------- */ [data-theme="dark"] .card { background-color: var(--ax-surface); border-color: var(--ax-border); color: var(--ax-text); } [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer { background-color: var(--ax-surface-alt); border-color: var(--ax-border); } [data-theme="dark"] .list-group-item { background-color: var(--ax-surface); border-color: var(--ax-border); color: var(--ax-text); } [data-theme="dark"] .list-group-item.active { background-color: #2c7be5; border-color: #2c7be5; color: #fff; } [data-theme="dark"] .section-bordered, [data-theme="dark"] .nav-tabs, [data-theme="dark"] .nav-tabs .nav-item .nav-link { border-color: var(--ax-border); } [data-theme="dark"] .nav-tabs .nav-item .nav-link.active { background-color: var(--ax-surface-alt); color: var(--ax-text); } /* ---------- Tables / AxDataGridV2 ---------- */ [data-theme="dark"] .table { color: var(--ax-text); } [data-theme="dark"] .table thead th { color: var(--ax-text-muted); background-color: var(--ax-surface-alt); border-color: var(--ax-border); } [data-theme="dark"] .table td, [data-theme="dark"] .table th { border-color: var(--ax-border); } [data-theme="dark"] .table-hover tbody tr:hover, [data-theme="dark"] .axdatagrid-hover tr:hover { background-color: var(--ax-surface-hover); color: var(--ax-text); } [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--ax-surface-alt); } [data-theme="dark"] .axdatagrid { background-color: var(--ax-surface); color: var(--ax-text); } /* ---------- Forms / inputs ---------- */ [data-theme="dark"] .form-control, [data-theme="dark"] .custom-select, [data-theme="dark"] .input-group-text, [data-theme="dark"] .form-control-plaintext, [data-theme="dark"] input:not([type]), [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="date"], [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--ax-surface-alt); border-color: var(--ax-border); color: var(--ax-text); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .custom-select:focus { background-color: var(--ax-surface-alt); border-color: #2c7be5; color: var(--ax-text); box-shadow: 0 0 0 .2rem rgba(44, 123, 229, .25); } [data-theme="dark"] .form-control::placeholder { color: var(--ax-text-muted); } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly], [data-theme="dark"] .custom-select:disabled { background-color: var(--ax-surface); color: var(--ax-text-muted); } [data-theme="dark"] .custom-control-label::before { background-color: var(--ax-surface-alt); border-color: var(--ax-border); } [data-theme="dark"] .custom-switch .custom-control-label::after { background-color: var(--ax-text-muted); } [data-theme="dark"] .custom-control-input:checked ~ .custom-control-label::before { background-color: #2c7be5; border-color: #2c7be5; } [data-theme="dark"] .custom-control-input:checked ~ .custom-control-label::after { background-color: #fff; } [data-theme="dark"] .custom-control-input:disabled ~ .custom-control-label::before { background-color: var(--ax-surface); } /* ---------- Dropdowns / menus / popovers ---------- */ [data-theme="dark"] .dropdown-menu { background-color: var(--ax-surface); border-color: var(--ax-border); color: var(--ax-text); } [data-theme="dark"] .dropdown-item { color: var(--ax-text); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus, [data-theme="dark"] .dropdown-item.active { background-color: var(--ax-surface-hover); color: var(--ax-text); } [data-theme="dark"] .dropdown-item.disabled, [data-theme="dark"] .dropdown-item:disabled { color: var(--ax-text-muted); } [data-theme="dark"] .popover { background-color: var(--ax-surface); border-color: var(--ax-border); color: var(--ax-text); } [data-theme="dark"] .popover-header { background-color: var(--ax-surface-alt); border-color: var(--ax-border); color: var(--ax-text); } [data-theme="dark"] .bs-popover-top > .arrow::after, [data-theme="dark"] .bs-popover-auto[x-placement^="top"] > .arrow::after { border-top-color: var(--ax-surface); } [data-theme="dark"] .bs-popover-bottom > .arrow::after, [data-theme="dark"] .bs-popover-auto[x-placement^="bottom"] > .arrow::after { border-bottom-color: var(--ax-surface); } [data-theme="dark"] .tooltip-inner { background-color: var(--ax-surface-alt); color: var(--ax-text); } /* Typeahead / search-select dropdowns */ [data-theme="dark"] .blazored-typeahead__results, [data-theme="dark"] .blazored-typeahead__result, [data-theme="dark"] .ss-dropdown, [data-theme="dark"] .ss-list, [data-theme="dark"] .ss-option { background-color: var(--ax-surface); color: var(--ax-text); border-color: var(--ax-border); } [data-theme="dark"] .blazored-typeahead__result.active, [data-theme="dark"] .blazored-typeahead__result:hover, [data-theme="dark"] .ss-option:hover, [data-theme="dark"] .ss-option.ss-highlighted { background-color: var(--ax-surface-hover); } /* ---------- Modals ---------- */ [data-theme="dark"] .modal-content { background-color: var(--ax-surface); color: var(--ax-text); border-color: var(--ax-border); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--ax-border); } [data-theme="dark"] .close { color: var(--ax-text); text-shadow: none; } [data-theme="dark"] .close:hover { color: var(--ax-text); opacity: .9; } /* AxModal.razor uses inline styles for background/borders; !important needed to win */ [data-theme="dark"] .axmodal-content { background-color: var(--ax-surface) !important; color: var(--ax-text); border-color: var(--ax-border) !important; } [data-theme="dark"] .axmodal-header { background-color: var(--ax-surface-alt) !important; border-color: var(--ax-border) !important; } [data-theme="dark"] .axmodal-footer { border-color: var(--ax-border) !important; } /* ---------- Buttons ---------- */ [data-theme="dark"] .btn-light, [data-theme="dark"] .btn-white, [data-theme="dark"] .btn-outline-light { background-color: var(--ax-surface-alt); border-color: var(--ax-border); color: var(--ax-text); } [data-theme="dark"] .btn-light:hover, [data-theme="dark"] .btn-white:hover, [data-theme="dark"] .btn-outline-light:hover { background-color: var(--ax-surface-hover); color: var(--ax-text); } [data-theme="dark"] .btn-outline-secondary { color: var(--ax-text-muted); border-color: var(--ax-border); } [data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--ax-surface-hover); color: var(--ax-text); } /* ---------- Badges / alerts ---------- */ [data-theme="dark"] .badge-light { background-color: var(--ax-surface-alt); color: var(--ax-text); } [data-theme="dark"] .alert-light { background-color: var(--ax-surface-alt); border-color: var(--ax-border); color: var(--ax-text); } /* ---------- Pagination / breadcrumbs ---------- */ [data-theme="dark"] .page-link { background-color: var(--ax-surface); border-color: var(--ax-border); color: var(--ax-text); } [data-theme="dark"] .page-link:hover { background-color: var(--ax-surface-hover); color: var(--ax-text); } [data-theme="dark"] .page-item.disabled .page-link { background-color: var(--ax-surface-alt); color: var(--ax-text-muted); } [data-theme="dark"] .page-item.active .page-link { background-color: #2c7be5; border-color: #2c7be5; } [data-theme="dark"] .breadcrumb-item.active { color: var(--ax-text-muted); } /* ---------- Toasts ---------- */ [data-theme="dark"] .blazored-toast-container .blazored-toast { background-color: var(--ax-surface); color: var(--ax-text); border-color: var(--ax-border); } /* ---------- AG Grid (ag-theme-quartz) ---------- */ [data-theme="dark"] .ag-theme-quartz { --ag-background-color: var(--ax-surface); --ag-foreground-color: var(--ax-text); --ag-header-background-color: var(--ax-surface-alt); --ag-header-foreground-color: var(--ax-text-muted); --ag-odd-row-background-color: var(--ax-surface); --ag-row-hover-color: var(--ax-surface-hover); --ag-selected-row-background-color: var(--ax-surface-hover); --ag-border-color: var(--ax-border); --ag-row-border-color: var(--ax-border); --ag-secondary-foreground-color: var(--ax-text-muted); --ag-disabled-foreground-color: var(--ax-text-muted); --ag-input-background-color: var(--ax-surface-alt); --ag-input-border-color: var(--ax-border); --ag-input-disabled-background-color: var(--ax-surface); --ag-modal-overlay-background-color: rgba(21, 23, 28, .66); --ag-control-panel-background-color: var(--ax-surface-alt); --ag-side-bar-background-color: var(--ax-surface-alt); --ag-tooltip-background-color: var(--ax-surface-alt); --ag-chip-background-color: var(--ax-surface-alt); --ag-range-selection-background-color: rgba(44, 123, 229, .2); } [data-theme="dark"] .ag-theme-quartz .ag-header { border-bottom-color: var(--ax-border); } [data-theme="dark"] .ag-placeholder { color: var(--ax-text-muted); } [data-theme="dark"] .ag-bold-value { color: var(--ax-text); } /* ---------- Scrollbars ---------- */ [data-theme="dark"] ::-webkit-scrollbar-track { background-color: var(--ax-surface); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: var(--ax-surface-hover); border-radius: 4px; }