dark mode supoport
This commit is contained in:
Mark Gregory
@@ -1586,3 +1586,220 @@ span.flatpickr-weekday {
|
||||
.hd-account-settings [data-flux-text] {
|
||||
color: #9ca3af !important;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================
|
||||
COMPLETE APPEARANCE SUPPORT
|
||||
Flux owns the root .dark class through @fluxAppearance.
|
||||
Light/System-light is therefore html:not(.dark).
|
||||
============================================================ */
|
||||
|
||||
html {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-app-body {
|
||||
background: #f4f6f8 !important;
|
||||
color: #1f2937 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-topbar {
|
||||
background: linear-gradient(90deg, #ffffff, #f8fafc) !important;
|
||||
border-bottom-color: #d8dee7 !important;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, .08) !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-topbar-brand {
|
||||
border-right-color: #d8dee7 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-brand-name,
|
||||
html:not(.dark) .hd-account-button,
|
||||
html:not(.dark) .hd-account-copy strong {
|
||||
color: #1f2937 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-account-copy small,
|
||||
html:not(.dark) .hd-top-search,
|
||||
html:not(.dark) .hd-top-search i {
|
||||
color: #667085 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-top-search {
|
||||
background: #f8fafc !important;
|
||||
border-color: #d8dee7 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-top-search input {
|
||||
color: #1f2937 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-shell-sidebar {
|
||||
background: linear-gradient(180deg, #ffffff, #f7f9fc) !important;
|
||||
border-right-color: #d8dee7 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-nav-heading {
|
||||
color: #7a8492 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-nav-link {
|
||||
color: #596579 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-nav-link i {
|
||||
color: #7a8492 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-nav-link:hover {
|
||||
background: #eef2f7 !important;
|
||||
color: #111827 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-nav-link.is-active {
|
||||
background: linear-gradient(90deg, #e7edf6, #eef2f7) !important;
|
||||
color: #111827 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-nav-link.is-active i {
|
||||
color: #2563eb !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-shell-main {
|
||||
background:
|
||||
radial-gradient(circle at 75% 0, rgba(37, 99, 235, .055), transparent 35%),
|
||||
#f4f6f8 !important;
|
||||
color: #1f2937 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-account-menu[open] .hd-account-button,
|
||||
html:not(.dark) .hd-account-button:hover {
|
||||
background: #eef2f7 !important;
|
||||
border-color: #d8dee7 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-account-dropdown {
|
||||
background: #ffffff !important;
|
||||
border-color: #d8dee7 !important;
|
||||
color: #1f2937 !important;
|
||||
box-shadow: 0 24px 60px rgba(15, 23, 42, .16) !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-account-dropdown-user {
|
||||
background: #f8fafc !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-account-dropdown-copy strong,
|
||||
html:not(.dark) .hd-account-dropdown-nav a,
|
||||
html:not(.dark) .hd-account-logout {
|
||||
color: #1f2937 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-account-dropdown-copy span,
|
||||
html:not(.dark) .hd-account-dropdown-copy small,
|
||||
html:not(.dark) .hd-account-dropdown-nav a i,
|
||||
html:not(.dark) .hd-account-logout i {
|
||||
color: #667085 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-account-dropdown-divider {
|
||||
background: #e2e8f0 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .hd-account-dropdown-nav a:hover,
|
||||
html:not(.dark) .hd-account-dropdown-nav a:focus-visible {
|
||||
background: #eef2f7 !important;
|
||||
border-color: #d8dee7 !important;
|
||||
}
|
||||
|
||||
/* Backend forms, settings and auth controls */
|
||||
html:not(.dark) .hd-select,
|
||||
html:not(.dark) .helpdesk-ticket-form input,
|
||||
html:not(.dark) .helpdesk-ticket-form textarea,
|
||||
html:not(.dark) .helpdesk-ticket-form select,
|
||||
html:not(.dark) .hd-account-settings input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
|
||||
html:not(.dark) .hd-account-settings textarea,
|
||||
html:not(.dark) .hd-account-settings select,
|
||||
html:not(.dark) .hd-auth-surface input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
|
||||
html:not(.dark) .hd-auth-surface textarea,
|
||||
html:not(.dark) .hd-auth-surface select {
|
||||
background: #ffffff !important;
|
||||
background-color: #ffffff !important;
|
||||
color: #1f2937 !important;
|
||||
border-color: #c9d1dc !important;
|
||||
caret-color: #1f2937 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .helpdesk-ticket-form input:disabled,
|
||||
html:not(.dark) .helpdesk-ticket-form textarea:disabled,
|
||||
html:not(.dark) .helpdesk-ticket-form select:disabled {
|
||||
background: #eef2f7 !important;
|
||||
color: #667085 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .helpdesk-ticket-form input:-webkit-autofill,
|
||||
html:not(.dark) .helpdesk-ticket-form textarea:-webkit-autofill,
|
||||
html:not(.dark) .helpdesk-ticket-form select:-webkit-autofill {
|
||||
-webkit-text-fill-color: #1f2937 !important;
|
||||
box-shadow: 0 0 0 1000px #ffffff inset !important;
|
||||
}
|
||||
|
||||
/* Select2 / popovers */
|
||||
html:not(.dark) .select2-dropdown,
|
||||
html:not(.dark) .flatpickr-calendar {
|
||||
background: #ffffff !important;
|
||||
color: #1f2937 !important;
|
||||
border-color: #cfd6e1 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .select2-container--default .select2-results__option {
|
||||
color: #1f2937 !important;
|
||||
}
|
||||
|
||||
/* Catch legacy Helpdesk views that still contain dark-only utility classes. */
|
||||
html:not(.dark) .bg-zinc-950,
|
||||
html:not(.dark) .bg-zinc-950\/80,
|
||||
html:not(.dark) .bg-zinc-950\/70,
|
||||
html:not(.dark) .bg-zinc-950\/60,
|
||||
html:not(.dark) .bg-zinc-950\/55,
|
||||
html:not(.dark) .bg-zinc-900,
|
||||
html:not(.dark) .bg-zinc-900\/80,
|
||||
html:not(.dark) .bg-zinc-900\/70,
|
||||
html:not(.dark) .bg-zinc-800 {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .border-zinc-800,
|
||||
html:not(.dark) .border-zinc-700,
|
||||
html:not(.dark) .border-zinc-600 {
|
||||
border-color: #d8dee7 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .text-zinc-100,
|
||||
html:not(.dark) .text-zinc-200 {
|
||||
color: #1f2937 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .text-zinc-300 {
|
||||
color: #374151 !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .text-zinc-400,
|
||||
html:not(.dark) .text-zinc-500 {
|
||||
color: #667085 !important;
|
||||
}
|
||||
|
||||
/* Do not wash out coloured action buttons/hero areas. */
|
||||
html:not(.dark) .hd-btn,
|
||||
html:not(.dark) [class*="bg-blue-"],
|
||||
html:not(.dark) [class*="bg-green-"],
|
||||
html:not(.dark) [class*="bg-emerald-"],
|
||||
html:not(.dark) [class*="bg-red-"],
|
||||
html:not(.dark) [class*="bg-amber-"],
|
||||
html:not(.dark) [class*="bg-violet-"] {
|
||||
/* their own utility/button colour remains authoritative */
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user