/* * Dark theme overrides * Automatically applied when 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; }