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) <noreply@anthropic.com>
This commit is contained in:
Matthieu
248
frontend/assets/css/dark.css
Normal file
248
frontend/assets/css/dark.css
Normal file
@@ -0,0 +1,248 @@
|
||||
/*
|
||||
* 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;
|
||||
}
|
||||
Reference in New Issue
Block a user