implement earth mode

MapGPT/app/globals.css

@@ -66,11 +66,37 @@
   }
 }
 
-@layer base {
-  * {
-    @apply border-border;
+  .earth {
+    --background: 34 35% 91%;
+    --foreground: 120 50% 30%;
+
+    --card: 120 20% 80%;
+    --card-foreground: 120 25% 30%;
+
+    --popover: 34 35% 91%;
+    --popover-foreground: 34 35% 9%;
+
+    --primary: 120 50% 30%;
+    --primary-foreground: 34 60% 9%;
+
+    --secondary: 34 35% 75%;
+    --secondary-foreground: 52 21% 30%;
+
+    --muted: 34 35% 75%;
+    --muted-foreground: 52 21% 30%;
+
+    --accent: 34 35% 75%; 
+    --accent-foreground: 120 50% 30%; 
+
+    --destructive: 34 35% 9%;
+    --destructive-foreground: 34 60% 9%;
+
+    --border: 34 35% 75%;
+    --input: 34 35% 75%;
+    --ring: 34 35% 75%;
   }
+
   body {
-    @apply bg-background text-foreground;
-  }
-}
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }

MapGPT/app/layout.tsx

@@ -53,6 +53,7 @@ export default function RootLayout({
           defaultTheme="system"
           enableSystem
           disableTransitionOnChange
+          themes={['light', 'dark', 'earth']}
         >
           <Header />
           {children}
@@ -63,4 +64,4 @@ export default function RootLayout({
       </body>
     </html>
   )
-}
+}

MapGPT/components/mode-toggle.tsx

@@ -31,6 +31,9 @@ export function ModeToggle() {
         <DropdownMenuItem onClick={() => setTheme('dark')}>
           Dark
         </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('earth')}>
+          Earth
+        </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme('system')}>
           System
         </DropdownMenuItem>