More themes

src/app/globals.css

@@ -21,7 +21,7 @@ html.dark {
   --muted: #a3a3a3;
 }
 
-html.aqua {
+html.ocean {
   --background: #020617;
   --foreground: #e2e8f0;
   --base: #0f172a;
@@ -39,13 +39,31 @@ html.forest {
   --muted: #7c8f85;
 }
 
-html.vibrant {
+html.sunset {
-  --background: #090420;
+  --background: #1a0f0f;
-  --foreground: #ffffff;
+  --foreground: #ffe4d6;
-  --base: #1a0942;
+  --base: #2c1810;
-  --offbase: #2d1163;
+  --offbase: #3d1f14;
-  --accent: #ff3d81;
+  --accent: #ff6b6b;
-  --muted: #9d7dcc;
+  --muted: #bc8f8f;
+}
+
+html.sea {
+  --background: #0c1922;
+  --foreground: #e0f2fe;
+  --base: #102c3d;
+  --offbase: #1a3c52;
+  --accent: #06b6d4;
+  --muted: #7ca7c4;
+}
+
+html.mint {
+  --background: #0f1916;
+  --foreground: #dcfce7;
+  --base: #132d27;
+  --offbase: #1c3d35;
+  --accent: #2dd4bf;
+  --muted: #75a99c;
 }
 
 body {

src/contexts/ThemeContext.tsx

@@ -2,7 +2,7 @@
 
 import { createContext, useContext, useEffect, useState, ReactNode, useLayoutEffect } from 'react';
 
-const THEMES = ['system', 'light', 'dark', 'aqua', 'forest', 'vibrant'] as const;
+const THEMES = ['system', 'light', 'dark', 'ocean', 'forest', 'sunset', 'sea', 'mint'] as const;
 type Theme = (typeof THEMES)[number];
 
 interface ThemeContextType {