Add dark mode with system preference auto-detection
All user-facing components now support dark mode via prefers-color-scheme. - Dark backgrounds: gray-950/900/800 - Dark text: gray-100/200/300/400 - Orange brand colors adapt with darker tints - Glass effects work in both modes - Skeletons, cards, filters, bottom sheet all themed - Google Maps InfoWindow stays light (maps don't support dark) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
color-scheme: light only;
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@@ -14,16 +14,11 @@
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
color-scheme: light only;
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
color-scheme: light only;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
@@ -34,11 +29,7 @@ html, body, #__next {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
/* Force Google Maps InfoWindow to light mode */
|
||||
/* Force Google Maps InfoWindow to light mode (maps don't support dark) */
|
||||
.gm-style .gm-style-iw,
|
||||
.gm-style .gm-style-iw-c,
|
||||
.gm-style .gm-style-iw-d,
|
||||
|
||||
Reference in New Issue
Block a user