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:
joungmin
2026-03-09 16:14:29 +09:00
parent 99660bf07b
commit 6223691b33
9 changed files with 102 additions and 111 deletions

View File

@@ -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,