/* Dark theme for Cloudie. * * The vendored ArchitectUI/Bootstrap-4 stylesheet (main.css) is a light theme * with hard-coded colours. Rather than fork that 280KB file, this sheet is * loaded unconditionally on every page and only takes effect when the document * root carries data-theme="dark" (set by the inline resolver in the of * _base.html / login/_base.html). Every rule is therefore scoped under * :root[data-theme="dark"] and, being loaded after main.css/app.css, wins on * cascade order at equal specificity. * * Palette is shared with the transactional email template (emails/_layout.html) * for a consistent brand look. Text/background pairings target WCAG AA (>= 4.5:1 * for body text, >= 3:1 for large text and UI borders): * text #dfe3ec on surface #22252e -> ~11.8:1 * muted #9aa3b5 on surface #22252e -> ~5.9:1 * link #93b0f2 on bg #16181d -> ~7.9:1 */ :root[data-theme="dark"] { --c-bg: #16181d; /* app background */ --c-surface: #22252e; /* cards, header, sidebar */ --c-surface-2: #2a2e39; /* dropdowns, modals, hovers */ --c-surface-3: #333846; /* stripes, active rows */ --c-border: #3a3f4b; /* hairline separators */ --c-border-strong: #474d5c; --c-input-bg: #1c1f27; --c-text: #dfe3ec; /* primary body text */ --c-text-muted: #9aa3b5; /* secondary text */ --c-heading: #f0f2f7; --c-link: #93b0f2; --c-link-hover: #b6cbf8; --c-primary: #3f6ad8; color-scheme: dark; } /* Let native widgets (scrollbars, date pickers, form controls) render dark. */ :root[data-theme="light"] { color-scheme: light; } /* ---- Base ------------------------------------------------------------- */ :root[data-theme="dark"] body { background-color: var(--c-bg); color: var(--c-text); } [data-theme="dark"] .app-theme-white.app-container, [data-theme="dark"] .app-container { background: var(--c-bg); color: var(--c-text); } [data-theme="dark"] .app-main__outer, [data-theme="dark"] .app-main__inner { background: transparent; } /* ---- Header ----------------------------------------------------------- */ [data-theme="dark"] .app-theme-white .app-header, [data-theme="dark"] .app-header { background: var(--c-surface); color: var(--c-text); } [data-theme="dark"] .app-header, [data-theme="dark"] .app-header.header-shadow { box-shadow: 0 1px 0 0 var(--c-border); } [data-theme="dark"] .app-header .app-header__content .header-menu .nav-link { color: var(--c-text-muted); } [data-theme="dark"] .app-header .app-header__content .header-menu .nav-link:hover { color: var(--c-text); } /* The header wordmark is dark ink on transparent; swap to the white cut-out. */ [data-theme="dark"] .app-header__logo .logo-src { background-image: url(/static/images/skylon_host_logo.white.svg); } [data-theme="dark"] .app-theme-white.fixed-header .app-header__logo { background: rgba(34, 37, 46, 0.6); } /* ---- Sidebar ---------------------------------------------------------- */ [data-theme="dark"] .app-theme-white .app-sidebar, [data-theme="dark"] .app-sidebar { background: var(--c-surface); } [data-theme="dark"] .app-sidebar, [data-theme="dark"] .app-sidebar.sidebar-shadow { box-shadow: 1px 0 0 0 var(--c-border); } [data-theme="dark"] .vertical-nav-menu ul:before { color: var(--c-surface-3); background: var(--c-surface-3); } [data-theme="dark"] .vertical-nav-menu li a { color: var(--c-text-muted); } [data-theme="dark"] .vertical-nav-menu li a:hover { background: var(--c-surface-2); color: var(--c-text); } [data-theme="dark"] .vertical-nav-menu li a.mm-active { background: var(--c-surface-2); color: var(--c-link); } [data-theme="dark"] .vertical-nav-menu li a.mm-active > i { color: var(--c-link); } [data-theme="dark"] .app-sidebar__heading { color: var(--c-text-muted); } /* ---- Page title (admin layout) --------------------------------------- */ [data-theme="dark"] .app-theme-white .app-page-title { background: rgba(255, 255, 255, 0.03); } [data-theme="dark"] .page-title-heading { color: var(--c-text); } [data-theme="dark"] .page-title-subheading { color: var(--c-text-muted); } /* ---- Cards ------------------------------------------------------------ */ [data-theme="dark"] .card, [data-theme="dark"] .main-card .card { background-color: var(--c-surface); border-color: var(--c-border); color: var(--c-text); } [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer { background-color: var(--c-surface); border-color: var(--c-border); color: var(--c-text); } [data-theme="dark"] .card-title, [data-theme="dark"] .card-header-title { color: var(--c-heading); } /* ---- Text & background utilities ------------------------------------- */ [data-theme="dark"] .text-dark { color: var(--c-text) !important; } [data-theme="dark"] .text-muted { color: var(--c-text-muted) !important; } [data-theme="dark"] .text-black-50 { color: rgba(223, 227, 236, 0.5) !important; } [data-theme="dark"] .text-secondary { color: var(--c-text-muted) !important; } [data-theme="dark"] .bg-white { background-color: var(--c-surface) !important; } [data-theme="dark"] .bg-light { background-color: var(--c-surface-2) !important; } /* ---- Widgets ---------------------------------------------------------- */ [data-theme="dark"] .widget-numbers { color: var(--c-heading); } [data-theme="dark"] .widget-heading { color: var(--c-text); } [data-theme="dark"] .widget-subheading { color: var(--c-text-muted); } /* ---- Tables ----------------------------------------------------------- */ [data-theme="dark"] .table { color: var(--c-text); } [data-theme="dark"] .table th, [data-theme="dark"] .table td { border-top-color: var(--c-border); } [data-theme="dark"] .table thead th { border-bottom-color: var(--c-border-strong); color: var(--c-text); } [data-theme="dark"] .table .thead-light th { background-color: var(--c-surface-2); border-color: var(--c-border); color: var(--c-text); } [data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--c-surface-2); color: var(--c-text); } [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .table-bordered, [data-theme="dark"] .table-bordered th, [data-theme="dark"] .table-bordered td { border-color: var(--c-border); } /* Instance status colours brightened for legibility on dark. */ [data-theme="dark"] .instance-status.on { color: #3ac47d; } [data-theme="dark"] .instance-status.off { color: #ff6b81; } [data-theme="dark"] .instance-status.task { color: #b085f5; } /* ---- Forms ------------------------------------------------------------ */ [data-theme="dark"] .form-control, [data-theme="dark"] textarea.form-control, [data-theme="dark"] .custom-select { background-color: var(--c-input-bg); color: var(--c-text); border-color: var(--c-border-strong); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .custom-select:focus { background-color: var(--c-input-bg); color: var(--c-text); border-color: #4f6fbf; box-shadow: 0 0 0 0.2rem rgba(63, 106, 216, 0.25); } [data-theme="dark"] .form-control::placeholder { color: #868fa3; } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly] { background-color: var(--c-surface-2); color: var(--c-text-muted); } [data-theme="dark"] .input-group-text { background-color: var(--c-surface-2); border-color: var(--c-border-strong); color: var(--c-text-muted); } [data-theme="dark"] label, [data-theme="dark"] .col-form-label, [data-theme="dark"] .custom-control-label { color: var(--c-text); } [data-theme="dark"] .form-text, [data-theme="dark"] small.form-text { color: var(--c-text-muted); } /* ---- Dropdowns -------------------------------------------------------- */ [data-theme="dark"] .dropdown-menu { background-color: var(--c-surface-2); border-color: var(--c-border); color: var(--c-text); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .dropdown-item { color: var(--c-text); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--c-surface-3); color: var(--c-text); } [data-theme="dark"] .dropdown-item.active, [data-theme="dark"] .dropdown-item:active { background-color: var(--c-primary); color: #fff; } [data-theme="dark"] .dropdown-header { color: var(--c-text-muted); } [data-theme="dark"] .dropdown-divider { border-top-color: var(--c-border); } /* ---- Modals ----------------------------------------------------------- */ [data-theme="dark"] .modal-content { background-color: var(--c-surface); border-color: var(--c-border); color: var(--c-text); } [data-theme="dark"] .modal-header { border-bottom-color: var(--c-border); background: var(--c-surface-2); } [data-theme="dark"] .modal-footer { border-top-color: var(--c-border); background: var(--c-surface-2); } [data-theme="dark"] .modal-title { color: var(--c-heading); } [data-theme="dark"] .close { color: var(--c-text); text-shadow: none; opacity: 0.7; } [data-theme="dark"] .close:hover { color: var(--c-text); opacity: 1; } /* ---- List groups ------------------------------------------------------ */ [data-theme="dark"] .list-group-item { background-color: var(--c-surface); border-color: var(--c-border); color: var(--c-text); } [data-theme="dark"] .list-group-item-action:hover, [data-theme="dark"] .list-group-item-action:focus { background-color: var(--c-surface-2); color: var(--c-text); } /* ---- Nav / tabs ------------------------------------------------------- */ [data-theme="dark"] .nav-tabs { border-bottom-color: var(--c-border); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--c-text-muted); } [data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--c-border) var(--c-border) transparent; color: var(--c-text); } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--c-surface); border-color: var(--c-border) var(--c-border) var(--c-surface); color: var(--c-text); } [data-theme="dark"] .tab-content { color: var(--c-text); } /* ---- Links ------------------------------------------------------------ */ /* Restyle content links only; buttons, nav items and list rows keep their * component colours. */ [data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.list-group-item):not(.close):not(.badge) { color: var(--c-link); } [data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.list-group-item):not(.close):not(.badge):hover { color: var(--c-link-hover); } /* ---- Buttons that assume a light canvas ------------------------------ */ [data-theme="dark"] .btn-light { background-color: var(--c-surface-2); border-color: var(--c-border); color: var(--c-text); } [data-theme="dark"] .btn-light:hover { background-color: var(--c-surface-3); color: var(--c-text); } [data-theme="dark"] .btn-outline-secondary, [data-theme="dark"] .btn-outline-dark { color: var(--c-text-muted); border-color: var(--c-border-strong); } [data-theme="dark"] .btn-outline-secondary:hover, [data-theme="dark"] .btn-outline-dark:hover { background-color: var(--c-surface-2); color: var(--c-text); } /* ---- Misc components -------------------------------------------------- */ [data-theme="dark"] hr, [data-theme="dark"] .divider { border-top-color: var(--c-border); background: var(--c-border); } [data-theme="dark"] code { color: #f0a5c0; background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] pre { color: var(--c-text); } [data-theme="dark"] .badge-light { background-color: var(--c-surface-3); color: var(--c-text); } [data-theme="dark"] .progress { background-color: var(--c-surface-3); } [data-theme="dark"] .popover { background-color: var(--c-surface-2); border-color: var(--c-border); } [data-theme="dark"] .popover .popover-body { color: var(--c-text); } [data-theme="dark"] .popover-header { background-color: var(--c-surface-3); border-bottom-color: var(--c-border); color: var(--c-heading); } [data-theme="dark"] .popover .arrow::after { border-top-color: var(--c-surface-2); } /* Alerts keep their semantic hues but need a dark-friendly surface. */ [data-theme="dark"] .alert-secondary { background-color: var(--c-surface-2); border-color: var(--c-border); color: var(--c-text); } /* ---- SweetAlert2 dialogs (JS-generated) ------------------------------ */ [data-theme="dark"] .swal2-popup { background-color: var(--c-surface); color: var(--c-text); } [data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-html-container, [data-theme="dark"] .swal2-content { color: var(--c-text); } [data-theme="dark"] .swal2-input, [data-theme="dark"] .swal2-textarea, [data-theme="dark"] .swal2-select { background-color: var(--c-input-bg); color: var(--c-text); border-color: var(--c-border-strong); } [data-theme="dark"] .swal2-input::placeholder { color: #868fa3; } /* ---- Scrollbars ------------------------------------------------------- */ [data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--c-bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--c-surface-3); border-radius: 5px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--c-border-strong); } [data-theme="dark"] .deploy .package-button { border-color: var(--c-border-strong); } [data-theme="dark"] .deploy .btn-outline-light:hover { background-color: var(--c-surface-2); } [data-theme="dark"] .usage-row { background: var(--c-surface-2); border-bottom: 3px solid var(--c-border); }