Added Themes

2024-10-12 17:07:18 -05:00
parent fbba6a6017
commit 59f5c23b48
9 changed files with 1307 additions and 897 deletions
@@ -70,6 +70,29 @@
    --destructive-foreground: 2 82% 90%;
    --ring: 223 42% 57%;
  }
+
+  .midnight {
+    --background: 0 0% 0%;
+    --foreground: 0 0% 100%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 0 0% 50%;
+    --popover: 0 0% 10%;
+    --popover-foreground: 0 0% 95%;
+    --card: 0 0% 5%;
+    --card-foreground: 0 0% 90%;
+    --border: 0 0% 25%;
+    --input: 0 0% 20%;
+    --primary: 210 100% 40%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 210 50% 30%;
+    --secondary-foreground: 0 0% 90%;
+    --accent: 210 50% 25%;
+    --accent-foreground: 0 0% 90%;
+    --destructive: 6 90% 50%;
+    --destructive-foreground: 0 0% 100%;
+    --ring: 0 0% 70%;
+    --radius: 0.4rem;
+  }
 }

@layer base {
@@ -117,4 +140,4 @@
      transform: rotate(360deg);
    }
  }
-}
+}
@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
 import Navbar from '@/components/navbar'
+import { Themes } from "./providers";

 const inter = Inter({ subsets: ['latin'] })

@@ -22,9 +23,11 @@ export default function RootLayout({
      </head>

      <body className={inter.className}>
-        <Navbar />
-
-        <div className="pt-14">{children}</div>
+        <Themes>
+          <Navbar />
+        
+          <div className="pt-14">{children}</div>
+        </Themes>
      </body>
    </html>
  )
@@ -0,0 +1,7 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+
+export function Themes({ children }: { children: React.ReactNode }) {
+  return <ThemeProvider attribute="class">{children}</ThemeProvider>;
+}