diff --git a/src/app/globals.css b/src/app/globals.css
index 9c8a879..5fcb158 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -92,28 +92,159 @@
--ring: 0 0% 70%;
--radius: 0.4rem;
}
-
- .catppuccin {
- --background: 240 21% 15%;
- --foreground: 226 64% 88%;
- --muted: 240 21% 12%;
- --muted-foreground: 228 17% 64%;
- --popover: 240 21% 12%;
- --popover-foreground: 227 35% 80%;
- --card: 240 21% 12%;
- --card-foreground: 228 24% 72%;
- --border: 234 13% 31%;
- --input: 234 13% 31%;
- --primary: 115 54% 76%;
- --primary-foreground: 240 21% 15%;
- --secondary: 240 21% 12%;
- --secondary-foreground: 228 17% 64%;
- --accent: 237 16% 23%;
- --accent-foreground: 227 35% 80%;
- --destructive: 343 81% 75%;
- --destructive-foreground: 226 64% 88%;
- --ring: 228 24% 72%;
+ .ctp-mocha {
+ --background: 240 21% 15%; /*base*/
+ --foreground: 226 64% 88%; /*text*/
+ --muted: 240 21% 12%; /*mantle*/
+ --muted-foreground: 228 17% 64%; /*overlay 2*/
+ --popover: 240 21% 12%; /*mantle*/
+ --popover-foreground: 227 35% 80%; /*subtext 1*/
+ --card: 240 21% 12%; /*mantle*/
+ --card-foreground: 228 24% 72%; /*subtext 0*/
+ --border: 234 13% 31%; /*surface 1*/
+ --input: 234 13% 31%; /*surface 1*/
+ --primary: 115 54% 76%; /*green*/
+ --primary-foreground: 240 21% 15%; /*base*/
+ --secondary: 240 21% 12%; /*mantle*/
+ --secondary-foreground: 228 24% 72%; /*subtext 0*/
+ --accent: 237 16% 23%; /*surface 0*/
+ --accent-foreground: 227 35% 80%; /*subtext 1*/
+ --destructive: 343 81% 75%; /*red*/
+ --destructive-foreground: 226 64% 88%;/*text*/
+ --ring: 228 24% 72%; /*subtext 0*/
}
+ .ctp-latte {
+ --background: 220 23% 95%; /* base */
+ --foreground: 234 16% 35%;/* text */
+ --muted: 220 22% 92%; /* mantle */
+ --muted-foreground: 232 10% 53%; /* overlay2 */
+ --popover: 220 22% 92%; /* mantle */
+ --popover-foreground: 233 13% 41%; /* subtext1 */
+ --card: 220 22% 92%; /* mantle */
+ --card-foreground: 233 10% 47%; /* subtext0 */
+ --border: 225 14% 77%; /* surface1 */
+ --input: 225 14% 77%; /* surface1 */
+ --primary: 220 91% 54%; /* blue */
+ --primary-foreground: 220 23% 95%; /* base */
+ --secondary: 220 22% 92%; /* mantle */
+ --secondary-foreground: 233 10% 47%; /* subtext0 */
+ --accent: 223 16% 83%; /* surface0 */
+ --accent-foreground: 233 13% 41%; /* subtext1 */
+ --destructive: 347 87% 44%; /* red */
+ --destructive-foreground: 234 16% 35%; /* text */
+ --ring: 233 10% 47%; /* subtext0 */
+}
+
+.ctp-frappe {
+ --background: 229 19% 23%; /* base */
+ --foreground: 227 70% 87%; /* text */
+ --muted: 231 19% 20%; /* mantle */
+ --muted-foreground: 228 22% 66%; /* overlay2 */
+ --popover: 231 19% 20%; /* mantle */
+ --popover-foreground: 227 44% 80%; /* subtext1 */
+ --card: 231 19% 20%; /* mantle */
+ --card-foreground: 228 29% 73%; /* subtext0 */
+ --border: 227 15% 37%; /* surface1 */
+ --input: 227 15% 37%; /* surface1 */
+ --primary: 222 74% 74%; /* blue */
+ --primary-foreground: 229 19% 23%; /* base */
+ --secondary: 231 19% 20%; /* mantle */
+ --secondary-foreground: 228 29% 73%; /* subtext0 */
+ --accent: 230 16% 30%; /* surface0 */
+ --accent-foreground: 227 44% 80%; /* subtext1 */
+ --destructive: 359 68% 71%; /* red */
+ --destructive-foreground: 227 70% 87%; /* text */
+ --ring: 228 29% 73%; /* subtext0 */
+}
+ .ctp-macchiato {
+ --background: 232 23% 18%; /* base */
+ --foreground: 227 68% 88%; /* text */
+ --muted: 233 23% 15%; /* mantle */
+ --muted-foreground: 228 20% 65%; /* overlay2 */
+ --popover: 233 23% 15%; /* mantle */
+ --popover-foreground: 228 39% 80%; /* subtext1 */
+ --card: 233 23% 15%; /* mantle */
+ --card-foreground: 227 27% 72%; /* subtext0 */
+ --border: 231 16% 34%; /* surface1 */
+ --input: 231 16% 34%; /* surface1 */
+ --primary: 220 83% 75%; /* blue */
+ --primary-foreground: 232 23% 18%; /* base */
+ --secondary: 233 23% 15%; /* mantle */
+ --secondary-foreground: 227 27% 72%; /* subtext0 */
+ --accent: 230 19% 26%; /* surface0 */
+ --accent-foreground: 228 39% 80%; /* subtext1 */
+ --destructive: 351 74% 73%; /* red */
+ --destructive-foreground: 227 68% 88%; /* text */
+ --ring: 227 27% 72%; /* subtext0 */
+ }
+
+ .rp-main {
+ --background: 249 22% 12%;
+ --foreground: 245 50% 91%;
+ --muted: 249 12% 47%;
+ --muted-foreground: 248 15% 61%;
+ --popover: 247 23% 15%;
+ --popover-foreground: 245 50% 91%;
+ --card: 248 25% 18%;
+ --card-foreground: 245 50% 91%;
+ --border: 249 15% 28%;
+ --input: 249 15% 28%;
+ --primary: 267 57% 78%;
+ --primary-foreground: 249 22% 12%;
+ --secondary: 245 22% 20%;
+ --secondary-foreground: 245 50% 91%;
+ --accent: 249 15% 28%;
+ --accent-foreground: 245 50% 91%;
+ --destructive: 343 76% 68%;
+ --destructive-foreground: 245 50% 91%;
+ --ring: 248 15% 28%;
+ }
+
+ .rp-moon {
+ --background: 246 24% 17%;
+ --foreground: 245 50% 91%;
+ --muted: 249 12% 47%;
+ --muted-foreground: 248 15% 61%;
+ --popover: 248 24% 20%;
+ --popover-foreground: 245 50% 91%;
+ --card: 248 21% 26%;
+ --card-foreground: 245 50% 91%;
+ --border: 247 16% 30%;
+ --input: 247 16% 30%;
+ --primary: 267 57% 78%;
+ --primary-foreground: 246 24% 17%;
+ --secondary: 248 21% 26%;
+ --secondary-foreground: 245 50% 91%;
+ --accent: 247 16% 30%;
+ --accent-foreground: 245 50% 91%;
+ --destructive: 343 76% 68%;
+ --destructive-foreground: 245 50% 91%;
+ --ring: 247 16% 30%;
+ }
+
+ .rp-dawn {
+ --background: 32 57% 95%;
+ --foreground: 248 19% 40%;
+ --muted: 257 9% 61%;
+ --muted-foreground: 248 12% 52%;
+ --popover: 35 100% 98%;
+ --popover-foreground: 248 19% 40%;
+ --card: 33 43% 91%;
+ --card-foreground: 248 19% 40%;
+ --border: 10 9% 86%;
+ --input: 10 9% 86%;
+ --primary: 268 21% 57%;
+ --primary-foreground: 32 57% 95%;
+ --secondary: 33 43% 91%;
+ --secondary-foreground: 248 19% 40%;
+ --accent: 10 9% 86%;
+ --accent-foreground: 248 19% 40%;
+ --destructive: 343 35% 55%;
+ --destructive-foreground: 248 19% 40%;
+ --ring: 10 9% 86%;
+ }
+
+
}
@layer base {
diff --git a/src/components/ThemeSwitch.tsx b/src/components/ThemeSwitch.tsx
index faa1469..1780bc4 100644
--- a/src/components/ThemeSwitch.tsx
+++ b/src/components/ThemeSwitch.tsx
@@ -38,8 +38,26 @@ export function ModeToggle() {
setTheme("midnight")}>
Midnight
- setTheme("catppuccin")}>
- Catppuccin
+ setTheme("ctp-mocha")}>
+ Catppuccin Mohca
+
+ setTheme("ctp-frappe")}>
+ Catppuccin Frappe
+
+ setTheme("ctp-latte")}>
+ Catppuccin Latte
+
+ setTheme("ctp-macchiato")}>
+ Catppuccin Macchiato
+
+ setTheme("rp-main")}>
+ Rose Pine
+
+ setTheme("rp-moon")}>
+ Rose Pine Moon
+
+ setTheme("rp-dawn")}>
+ Rose Pine Dawn
setTheme("system")}>
System
diff --git a/src/components/theme-provider.tsx b/src/components/theme-provider.tsx
index a577a39..b3fa622 100644
--- a/src/components/theme-provider.tsx
+++ b/src/components/theme-provider.tsx
@@ -5,14 +5,26 @@ type Theme =
| 'cyberpunk'
| 'bluelight'
| 'midnight'
- | 'catppuccin'
+ | 'ctp-mocha'
+ | 'ctp-frappe'
+ | 'ctp-latte'
+ | 'ctp-macchiato'
+ | 'rp-main'
+ | 'rp-moon'
+ | 'rp-dawn'
| 'system';
const themes: Theme[] = [
'radius',
'cyberpunk',
'bluelight',
'midnight',
- 'catppuccin',
+ 'ctp-mocha',
+ 'ctp-frappe',
+ 'ctp-latte',
+ 'ctp-macchiato',
+ 'rp-main',
+ 'rp-moon',
+ 'rp-dawn',
'system',
];
type ThemeProviderProps = {