andy/food
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add light/dark mode with toggle, fix all theme-aware text colors

Browse Source
This commit is contained in:
Andy
2026-03-21 12:18:14 +00:00
parent 4741546adf
commit 75e1d0083f
9 changed files with 211 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
app/globals.css
View File

@@ -1,17 +1,9 @@
@import "tailwindcss";
:root {
--background: #0d0d0d;
--foreground: #f5f5f5;
--accent: #f59e0b;
--accent-dim: #d97706;
--surface: rgba(255, 255, 255, 0.04);
--border: rgba(255, 255, 255, 0.08);
}
/* Dark mode via .dark class on <html> */
@custom-variant dark (&:where(.dark, .dark *));
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
@@ -25,8 +17,6 @@ html {
}
body {
background-color: #0d0d0d;
color: #f5f5f5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@@ -38,7 +28,7 @@ body {
}
::-webkit-scrollbar-track {
background: #0d0d0d;
background: transparent;
}
::-webkit-scrollbar-thumb {
@@ -50,23 +40,35 @@ body {
background: rgba(245, 158, 11, 0.6);
}
/* Leaflet dark overrides */
.leaflet-container {
background: #0d0d0d;
}
/* Leaflet popup — light mode */
.leaflet-popup-content-wrapper {
background: #1a1a1a;
color: #f5f5f5;
border: 1px solid rgba(255, 255, 255, 0.08);
background: #ffffff;
color: #111111;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}
.leaflet-popup-tip {
background: #1a1a1a;
background: #ffffff;
}
.leaflet-popup-close-button {
color: #111111 !important;
}
/* Leaflet popup — dark mode */
.dark .leaflet-popup-content-wrapper {
background: #1a1a1a;
color: #f5f5f5;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}
.dark .leaflet-popup-tip {
background: #1a1a1a;
}
.dark .leaflet-popup-close-button {
color: #f5f5f5 !important;
}