From ff9a6763c324ffbd35395f39daf70e52e029295a Mon Sep 17 00:00:00 2001 From: Matthieu Date: Thu, 19 Mar 2026 18:06:52 +0100 Subject: [PATCH] fix(ui) : add dark mode overrides for MalioSelect, forms, and date inputs - 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) --- frontend/assets/css/dark.css | 248 +++++++++++++++++++++++++++++++++++ 1 file changed, 248 insertions(+) create mode 100644 frontend/assets/css/dark.css diff --git a/frontend/assets/css/dark.css b/frontend/assets/css/dark.css new file mode 100644 index 0000000..70782bb --- /dev/null +++ b/frontend/assets/css/dark.css @@ -0,0 +1,248 @@ +/* + * 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; +}