feat: more themes

src/app/globals.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
+  /* :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
@@ -46,6 +46,40 @@
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 224.3 76.3% 48%;
+  } */
+
+  :root {
+    --gradient: #00f5a0;
+
+    --background: 169 65% 3.84%;
+    --foreground: 169 10% 97.4%;
+
+    --muted: 169 50% 14.399999999999999%;
+    --muted-foreground: 169 10% 54.8%;
+
+    --popover: 169 45% 6.24%;
+    --popover-foreground: 169 10% 97.4%;
+
+    --card: 169 45% 6.24%;
+    --card-foreground: 169 10% 97.4%;
+
+    --border: 169 50% 14.399999999999999%;
+    --input: 169 50% 14.399999999999999%;
+
+    --primary: 169 100% 48%;
+    --primary-foreground: 169 10% 4.8%;
+
+    --secondary: 169 50% 14.399999999999999%;
+    --secondary-foreground: 169 10% 97.4%;
+
+    --accent: 169 50% 14.399999999999999%;
+    --accent-foreground: 169 10% 97.4%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 169 10% 97.4%;
+
+    --ring: 169 100% 48%;
+    --radius: 0.5rem;
   }
 
   .violett {
@@ -136,7 +170,7 @@
     --ring: 20.5 90.2% 48.2%;
   }
 
-  .foo {
+  .maya-blue {
     /* CSS: .bg-gradient { background: var(--gradient) } */
     --gradient: #72c6ef;
 
@@ -170,7 +204,7 @@
     --ring: 212 80% 69%;
   }
 
-  .foo2 {
+  .spring-green {
     /* CSS: .bg-gradient { background: var(--gradient) } */
     --gradient: #00f5a0;
 
@@ -239,37 +273,163 @@
   }
 
   .bright-turquoise {
-      /* CSS: .bg-gradient { background: var(--gradient) } */
+    /* CSS: .bg-gradient { background: var(--gradient) } */
-      --gradient: #00dbde;
+    --gradient: #00dbde;
 
-      --background: 192 65% 3.52%;
+    --background: 192 65% 3.52%;
-      --foreground: 192 10% 97.2%;
+    --foreground: 192 10% 97.2%;
 
-      --muted: 192 50% 13.2%;
+    --muted: 192 50% 13.2%;
-      --muted-foreground: 192 10% 54.4%;
+    --muted-foreground: 192 10% 54.4%;
 
-      --popover: 192 45% 5.72%;
+    --popover: 192 45% 5.72%;
-      --popover-foreground: 192 10% 97.2%;
+    --popover-foreground: 192 10% 97.2%;
 
-      --card: 192 45% 5.72%;
+    --card: 192 45% 5.72%;
-      --card-foreground: 192 10% 97.2%;
+    --card-foreground: 192 10% 97.2%;
 
-      --border: 192 50% 13.2%;
+    --border: 192 50% 13.2%;
-      --input: 192 50% 13.2%;
+    --input: 192 50% 13.2%;
 
-      --primary: 192 100% 44%;
+    --primary: 192 100% 44%;
-      --primary-foreground: 192 10% 97.2%;
+    --primary-foreground: 192 10% 97.2%;
 
-      --secondary: 192 50% 13.2%;
+    --secondary: 192 50% 13.2%;
-      --secondary-foreground: 192 10% 97.2%;
+    --secondary-foreground: 192 10% 97.2%;
 
-      --accent: 192 50% 13.2%;
+    --accent: 192 50% 13.2%;
-      --accent-foreground: 192 10% 97.2%;
+    --accent-foreground: 192 10% 97.2%;
 
-      --destructive: 0 62.8% 30.6%;
+    --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 192 10% 97.2%;
+    --destructive-foreground: 192 10% 97.2%;
 
-      --ring: 192 100% 44%;
+    --ring: 192 100% 44%;
+  }
+
+  .gold {
+    --background: 16, 43%, 34%;
+    --foreground: 38, 77%, 88%;
+
+    --muted: 28, 46%, 56%;
+    --muted-foreground: 38, 77%, 88%;
+
+    --popover: 16, 43%, 34%;
+    --popover-foreground: 38, 77%, 88%;
+
+    --border: 28, 46%, 56%;
+    --input: 28, 46%, 56%;
+
+    --card: 16, 43%, 34%;
+    --card-foreground: 38, 77%, 88%;
+
+    --primary: 28, 46%, 56%;
+    --primary-foreground: 60, 70%, 90%;
+
+    --secondary: 39, 100%, 73%;
+    --secondary-foreground: 16, 43%, 34%;
+
+    --accent: 39, 100%, 52%;
+    --accent-foreground: 16, 43%, 34%;
+
+    --destructive: 38, 77%, 88%;
+    --destructive-foreground: 16, 43%, 34%;
+
+    --ring: 28, 46%, 56%;
+  }
+
+  .dracula {
+    --background: 231, 15%, 18%;
+    --foreground: 60, 30%, 96%;
+
+    --muted: 232, 14%, 31%;
+    --muted-foreground: 60, 30%, 96%;
+
+    --popover: 231, 15%, 18%;
+    --popover-foreground: 60, 30%, 96%;
+
+    --border: 232, 14%, 31%;
+    --input: 225, 27%, 51%;
+
+    --card: 232, 14%, 31%;
+    --card-foreground: 60, 30%, 96%;
+
+    --primary: 265, 89%, 78%;
+    --primary-foreground: 60, 30%, 96%;
+
+    --secondary: 326, 100%, 74%;
+    --secondary-foreground: 60, 30%, 96%;
+
+    --accent: 225, 27%, 51%;
+    --accent-foreground: 60, 30%, 96%;
+
+    --destructive: 0, 100%, 67%;
+    --destructive-foreground: 60, 30%, 96%;
+
+    --ring: 225, 27%, 51%;
+  }
+
+  .nord {
+    --background: 220, 16%, 16%;
+    --foreground: 222, 20%, 96%;
+
+    --muted: 215, 14%, 25%;
+    --muted-foreground: 222, 20%, 96%;
+
+    --popover: 220, 16%, 16%;
+    --popover-foreground: 222, 20%, 96%;
+
+    --border: 222, 20%, 40%;
+    --input: 222, 20%, 40%;
+
+    --card: 220, 16%, 16%;
+    --card-foreground: 222, 20%, 96%;
+
+    --primary: 222, 20%, 65%;
+    --primary-foreground: 220, 16%, 16%;
+
+    --secondary: 215, 14%, 25%;
+    --secondary-foreground: 222, 20%, 96%;
+
+    --accent: 215, 14%, 25%;
+    --accent-foreground: 222, 20%, 96%;
+
+    --destructive: 0, 80%, 50%;
+    --destructive-foreground: 222, 20%, 96%;
+
+    --ring: 222, 20%, 40%;
+  }
+
+  .laracon {
+    --background: 25, 13%, 18%;
+    --foreground: 0, 0%, 100%;
+
+    --muted: 0, 0%, 50%;
+    --muted-foreground: 0, 0%, 100%;
+
+    --popover: 0, 0%, 5%;
+    --popover-foreground: 0, 0%, 100%;
+
+    --border: 37, 17%, 35%;
+    --input: 37, 17%, 35%;
+
+    --card: 2, 94%, 57%;
+    --card-foreground: 0, 0%, 100%;
+
+    --primary: 254, 96%, 94%;
+    --primary-foreground: 0, 0%, 0%;
+
+    --secondary: 25, 13%, 18%;
+    --secondary-foreground: 0, 0%, 0%;
+
+    --accent: 2, 94%, 57%;
+    --accent-foreground: 0, 0%, 100%;
+
+    --destructive: 37, 17%, 35%;
+    --destructive-foreground: 0, 0%, 100%;
+
+    --link-text: 2, 94%, 57%; /* Variant of the accent color for link text */
+
+    --ring: 2, 94%, 57%;
   }
 }
 

src/app/layout.tsx

@@ -22,7 +22,7 @@ export default function RootLayout({
       <body className={cn(inter.className, "overflow-x-hidden")}>
         <ThemeProvider
           attribute="class"
-          defaultTheme="foo2"
+          defaultTheme="spring-green"
           enableSystem
           disableTransitionOnChange
         >

src/components/theme-toggle.tsx

@@ -36,17 +36,17 @@ export function ThemeToggle() {
         </DropdownMenuItem> */}
         <DropdownMenuItem
           onClick={() => {
-            document.documentElement.setAttribute("class", "foo");
+            document.documentElement.setAttribute("class", "maya-blue");
           }}
         >
-          Light Blue
+          Maya Blue
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => {
-            document.documentElement.setAttribute("class", "foo2");
+            document.documentElement.setAttribute("class", "spring-green");
           }}
         >
-          Light Green
+          Spring Green
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => {
@@ -62,6 +62,34 @@ export function ThemeToggle() {
         >
           Bright Turquoise
         </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => {
+            document.documentElement.setAttribute("class", "gold");
+          }}
+        >
+          Gold
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => {
+            document.documentElement.setAttribute("class", "dracula");
+          }}
+        >
+          Dracula
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => {
+            document.documentElement.setAttribute("class", "nord");
+          }}
+        >
+          Nord
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => {
+            document.documentElement.setAttribute("class", "laracon");
+          }}
+        >
+          Laracon
+        </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => {
             document.documentElement.setAttribute("class", "violett");