/** * NuxHost global appearance themes * Resolved theme on * User choice on */ :root, [data-nh-theme="light"] { color-scheme: light; --nh-body-bg: #f5f5f5; --nh-surface: #ffffff; --nh-surface-2: #f8f9fa; --nh-text: #262626; --nh-text-muted: #6c757d; --nh-border: #e5e5e5; --nh-border-soft: #ebedf2; --nh-input-bg: #ffffff; --nh-overlay: rgba(0, 0, 0, 0.45); --nh-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05); --nh-topbar-bg: #ffffff; --nh-sidebar-bg: #ffffff; --nh-placeholder: #adb5bd; --nh-table-stripe: rgba(0, 0, 0, 0.02); --nh-dropdown-bg: #ffffff; --nh-code-bg: #f1f3f5; } [data-nh-theme="dark"] { color-scheme: dark; --nh-body-bg: #0f1419; --nh-surface: #1a1f26; --nh-surface-2: #232a33; --nh-text: #e8eaed; --nh-text-muted: #9aa0a6; --nh-border: #2d3640; --nh-border-soft: #252c35; --nh-input-bg: #1a1f26; --nh-overlay: rgba(0, 0, 0, 0.65); --nh-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.35); --nh-topbar-bg: #1a1f26; --nh-sidebar-bg: #1a1f26; --nh-placeholder: #6c757d; --nh-table-stripe: rgba(255, 255, 255, 0.03); --nh-dropdown-bg: #1a1f26; --nh-code-bg: #232a33; } [data-nh-theme="dim"] { color-scheme: dark; --nh-body-bg: #161b22; --nh-surface: #21262d; --nh-surface-2: #2d333b; --nh-text: #e6edf3; --nh-text-muted: #8b949e; --nh-border: #30363d; --nh-border-soft: #2d333b; --nh-input-bg: #21262d; --nh-overlay: rgba(0, 0, 0, 0.55); --nh-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3); --nh-topbar-bg: #21262d; --nh-sidebar-bg: #21262d; --nh-placeholder: #6e7681; --nh-table-stripe: rgba(255, 255, 255, 0.025); --nh-dropdown-bg: #21262d; --nh-code-bg: #2d333b; } [data-nh-theme="contrast"] { color-scheme: light; --nh-body-bg: #ffffff; --nh-surface: #ffffff; --nh-surface-2: #f0f0f0; --nh-text: #000000; --nh-text-muted: #1a1a1a; --nh-border: #000000; --nh-border-soft: #333333; --nh-input-bg: #ffffff; --nh-overlay: rgba(0, 0, 0, 0.7); --nh-shadow: 0 0 0 2px #000000; --nh-topbar-bg: #ffffff; --nh-sidebar-bg: #ffffff; --nh-placeholder: #333333; --nh-table-stripe: rgba(0, 0, 0, 0.06); --nh-dropdown-bg: #ffffff; --nh-code-bg: #f0f0f0; } /* ── Base layout ─────────────────────────────────────────────── */ body { background-color: var(--nh-body-bg) !important; color: var(--nh-text) !important; } .text-dark { color: var(--nh-text) !important; } .text-muted, .text-secondary { color: var(--nh-text-muted) !important; } .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--nh-border) !important; } .bg-white, .bg-light { background-color: var(--nh-surface) !important; color: var(--nh-text); } .card { background-color: var(--nh-surface) !important; border-color: var(--nh-border-soft) !important; box-shadow: var(--nh-shadow) !important; color: var(--nh-text); } .card-header { background-color: transparent !important; border-bottom-color: var(--nh-border-soft) !important; color: var(--nh-text); } .list-group-item { background-color: var(--nh-surface); border-color: var(--nh-border); color: var(--nh-text); } .table { --bs-table-bg: var(--nh-surface); --bs-table-color: var(--nh-text); --bs-table-border-color: var(--nh-border); --bs-table-striped-bg: var(--nh-table-stripe); } .form-control, .form-select, .input-group-text { background-color: var(--nh-input-bg) !important; border-color: var(--nh-border) !important; color: var(--nh-text) !important; } .form-control::placeholder, .form-select::placeholder { color: var(--nh-placeholder) !important; } .form-control:focus, .form-select:focus { background-color: var(--nh-input-bg) !important; color: var(--nh-text) !important; } .dropdown-menu { background-color: var(--nh-dropdown-bg) !important; border-color: var(--nh-border) !important; color: var(--nh-text); } .dropdown-item { color: var(--nh-text); } .dropdown-item:hover, .dropdown-item:focus { background-color: rgba(var(--theme-rgb, 0, 57, 152), 0.1) !important; color: var(--nh-text); } .modal-content { background-color: var(--nh-surface); border-color: var(--nh-border); color: var(--nh-text); } .modal-header, .modal-footer { border-color: var(--nh-border); } .alert-light { background-color: var(--nh-surface-2) !important; border-color: var(--nh-border) !important; color: var(--nh-text); } .nav-tabs .nav-link { color: var(--nh-text-muted); } .nav-tabs .nav-link.active { background-color: var(--nh-surface); color: var(--nh-text); } /* Admin shell (header.php) */ .sidebar { background: var(--nh-sidebar-bg) !important; border-right-color: var(--nh-border) !important; } .sidebar .logo-area { background: var(--nh-sidebar-bg) !important; color: var(--nh-text) !important; border-bottom-color: var(--nh-border) !important; } .sidebar .nav-link { color: var(--nh-text) !important; } .sidebar .nav-section { color: var(--nh-text-muted) !important; } .topbar.navbar, #topbar { background-color: var(--nh-topbar-bg) !important; border-bottom-color: var(--nh-border) !important; } .overlay { background: var(--nh-overlay) !important; } #globalSearchDropdown { background-color: var(--nh-dropdown-bg) !important; border-color: var(--nh-border) !important; } #globalSearchDropdown .search-item { color: var(--nh-text) !important; } .btn-light { background-color: var(--nh-surface-2) !important; border-color: var(--nh-border) !important; color: var(--nh-text) !important; } .btn-light:hover { background-color: var(--nh-border-soft) !important; color: var(--nh-text) !important; } /* Auth / install cards */ .auth-shell .card, .nh-right-inner .card { background-color: var(--nh-surface); border-color: var(--nh-border); color: var(--nh-text); } .nh-right { background: var(--nh-body-bg); color: var(--nh-text); } .nh-right-inner .nh-section-label { color: var(--nh-text-muted); border-bottom-color: var(--nh-border); } /* Theme switcher */ .nh-theme-switcher .dropdown-toggle { background: var(--nh-surface-2); border: 1px solid var(--nh-border); color: var(--nh-text); } .nh-theme-switcher .dropdown-item.active { background-color: rgba(var(--theme-rgb, 0, 57, 152), 0.12); color: var(--theme, #003998); } .nh-theme-switcher .dropdown-item .ti-check { opacity: 0; } .nh-theme-switcher .dropdown-item.active .ti-check { opacity: 1; } [data-nh-theme="contrast"] .btn, [data-nh-theme="contrast"] .form-control, [data-nh-theme="contrast"] .card { border-width: 2px !important; } /* Select2 */ .select2-container--default .select2-selection--single { background-color: var(--nh-input-bg) !important; border-color: var(--nh-border) !important; color: var(--nh-text) !important; } .select2-dropdown { background-color: var(--nh-dropdown-bg) !important; border-color: var(--nh-border) !important; } .select2-container--default .select2-results__option { color: var(--nh-text); }