ff9a6763c3
- Override floating-label background (hardcoded white in malio/layer-ui) - Override text-black, border-black, border-m-muted for Malio components - Add color-scheme: dark for native date/datetime inputs - Override red/blue button backgrounds for dark mode - Fix checkbox/radio borders in dark mode Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
249 lines
4.9 KiB
CSS
249 lines
4.9 KiB
CSS
/*
|
|
* Dark theme overrides
|
|
* Automatically applied when <html class="dark"> is set.
|
|
* Overrides existing Tailwind utilities so components need zero changes.
|
|
*/
|
|
|
|
/* ── Backgrounds ── */
|
|
|
|
.dark .bg-white {
|
|
background-color: #1e1f2b !important;
|
|
}
|
|
|
|
.dark .bg-tertiary-500 {
|
|
background-color: #262838 !important;
|
|
}
|
|
|
|
.dark .bg-neutral-50 {
|
|
background-color: #262838 !important;
|
|
}
|
|
|
|
.dark .bg-neutral-100 {
|
|
background-color: #2e3045 !important;
|
|
}
|
|
|
|
.dark .bg-neutral-200 {
|
|
background-color: #363952 !important;
|
|
}
|
|
|
|
/* ── Hover backgrounds ── */
|
|
|
|
.dark .hover\:bg-neutral-50:hover {
|
|
background-color: #2e3045 !important;
|
|
}
|
|
|
|
.dark .hover\:bg-neutral-100:hover {
|
|
background-color: #363952 !important;
|
|
}
|
|
|
|
.dark .hover\:bg-neutral-200:hover {
|
|
background-color: #3a3d54 !important;
|
|
}
|
|
|
|
.dark .hover\:bg-neutral-300:hover {
|
|
background-color: #3a3d54 !important;
|
|
}
|
|
|
|
.dark .hover\:shadow-md:hover {
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3) !important;
|
|
}
|
|
|
|
/* ── Text ── */
|
|
|
|
.dark .text-neutral-900 {
|
|
color: #e5e5e5 !important;
|
|
}
|
|
|
|
.dark .text-neutral-800 {
|
|
color: #d4d4d8 !important;
|
|
}
|
|
|
|
.dark .text-neutral-700 {
|
|
color: #a1a1aa !important;
|
|
}
|
|
|
|
.dark .text-neutral-600 {
|
|
color: #8b8b9a !important;
|
|
}
|
|
|
|
.dark .text-neutral-500 {
|
|
color: #71717a !important;
|
|
}
|
|
|
|
.dark .text-neutral-400 {
|
|
color: #606070 !important;
|
|
}
|
|
|
|
.dark .text-neutral-300 {
|
|
color: #52525b !important;
|
|
}
|
|
|
|
/* ── Hover text ── */
|
|
|
|
.dark .hover\:text-neutral-700:hover {
|
|
color: #d4d4d8 !important;
|
|
}
|
|
|
|
.dark .hover\:text-neutral-600:hover {
|
|
color: #a1a1aa !important;
|
|
}
|
|
|
|
/* ── Borders ── */
|
|
|
|
.dark .border-neutral-200 {
|
|
border-color: #3a3d54 !important;
|
|
}
|
|
|
|
.dark .border-neutral-100 {
|
|
border-color: #2e3045 !important;
|
|
}
|
|
|
|
.dark .border-neutral-300 {
|
|
border-color: #3a3d54 !important;
|
|
}
|
|
|
|
.dark .hover\:border-neutral-300:hover {
|
|
border-color: #4a4d64 !important;
|
|
}
|
|
|
|
.dark .hover\:border-neutral-400:hover {
|
|
border-color: #4a4d64 !important;
|
|
}
|
|
|
|
/* ── Ring ── */
|
|
|
|
.dark .ring-black\/5 {
|
|
--tw-ring-color: rgb(255 255 255 / 0.05) !important;
|
|
}
|
|
|
|
/* ── Specific component overrides ── */
|
|
|
|
/* Modal header bg */
|
|
.dark .bg-neutral-50\/80 {
|
|
background-color: rgb(38 40 56 / 0.8) !important;
|
|
}
|
|
|
|
/* Sidebar collapse button */
|
|
.dark .shadow-sm {
|
|
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.2) !important;
|
|
}
|
|
|
|
/* User dropdown */
|
|
.dark .shadow-lg {
|
|
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3) !important;
|
|
}
|
|
|
|
/* Forms: inputs, selects, textareas */
|
|
.dark input:not([type="checkbox"]):not([type="radio"]),
|
|
.dark textarea,
|
|
.dark select {
|
|
background-color: #1e1f2b !important;
|
|
color: #e5e5e5 !important;
|
|
border-color: #3a3d54 !important;
|
|
}
|
|
|
|
.dark input:not([type="checkbox"]):not([type="radio"])::placeholder,
|
|
.dark textarea::placeholder {
|
|
color: #606070 !important;
|
|
}
|
|
|
|
.dark input:not([type="checkbox"]):not([type="radio"]):focus,
|
|
.dark textarea:focus,
|
|
.dark select:focus {
|
|
border-color: #222783 !important;
|
|
}
|
|
|
|
/* Labels */
|
|
.dark label {
|
|
color: #a1a1aa;
|
|
}
|
|
|
|
/* ── Malio Layer UI components ── */
|
|
|
|
/* MalioSelect: floating label has hardcoded background: white */
|
|
.dark .floating-label {
|
|
background: #1e1f2b !important;
|
|
color: #a1a1aa !important;
|
|
}
|
|
|
|
/* MalioSelect: text-black used for selected value and options */
|
|
.dark .text-black {
|
|
color: #e5e5e5 !important;
|
|
}
|
|
|
|
.dark .text-black\/60 {
|
|
color: #71717a !important;
|
|
}
|
|
|
|
.dark .text-black\/40 {
|
|
color: #606070 !important;
|
|
}
|
|
|
|
/* MalioSelect: border-black used when option is selected */
|
|
.dark .border-black {
|
|
border-color: #a1a1aa !important;
|
|
}
|
|
|
|
/* MalioSelect: border-m-muted default border */
|
|
.dark .border-m-muted {
|
|
border-color: #3a3d54 !important;
|
|
}
|
|
|
|
/* MalioSelect: dropdown option hover background */
|
|
.dark .bg-m-muted\/10 {
|
|
background-color: rgb(160 174 192 / 0.15) !important;
|
|
}
|
|
|
|
/* MalioSelect: dropdown shadow */
|
|
.dark .shadow-2xl {
|
|
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5) !important;
|
|
}
|
|
|
|
/* Checkbox/radio hardcoded black borders */
|
|
.dark .inp-cbx + .cbx svg {
|
|
stroke: #e5e5e5 !important;
|
|
}
|
|
|
|
.dark .inp-cbx + .cbx {
|
|
border-color: #a1a1aa !important;
|
|
}
|
|
|
|
/* Red/colored backgrounds for buttons */
|
|
.dark .bg-red-50 {
|
|
background-color: rgb(127 29 29 / 0.2) !important;
|
|
}
|
|
|
|
.dark .hover\:bg-red-100:hover {
|
|
background-color: rgb(127 29 29 / 0.3) !important;
|
|
}
|
|
|
|
.dark .bg-blue-50 {
|
|
background-color: rgb(30 58 138 / 0.2) !important;
|
|
}
|
|
|
|
/* Datetime/date input color-scheme for dark mode */
|
|
.dark input[type="datetime-local"],
|
|
.dark input[type="date"],
|
|
.dark input[type="time"] {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
.dark ::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-track {
|
|
background: #1e1f2b;
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background: #3a3d54;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb:hover {
|
|
background: #4a4d64;
|
|
}
|