update header and default shadcnui color theme

Author: Rowee13

Diff for: app/(root)/resources/page.tsx

@@ -2,7 +2,7 @@ const BlocksPage = () => {
     return (
         <section>
             <div className='max-w-7xl mx-auto px-4 py-8 flex flex-col justify-center items-center'>
-                <h2>Blocks page</h2>
+                <h2>Resources page</h2>
             </div>
         </section>
     )

Diff for: components/header/main-header.tsx

@@ -23,7 +23,7 @@ const MainHeader = () => {
                         {NAV_LINKS.map((link) => (
                             <li
                                 key={link.href}
-                                className={`px-2 py-1 ${pathname === link.href ? 'font-bold text-cyan-500' : 'hover:underline'} `}
+                                className={`px-2 py-1 ${pathname === link.href ? 'font-bold text-primary' : 'hover:underline'} `}
                             >
                                 <Link href={link.href}>{link.label}</Link>
                             </li>

Diff for: constant/nav-links.ts

@@ -1,5 +1,5 @@
 export const NAV_LINKS = [
     { href: '/', label: 'Home' },
     { href: '/components', label: 'Components' },
-    { href: '/blocks', label: 'Blocks' },
+    { href: '/resources', label: 'Resources' },
 ]

Diff for: styles/globals.css

@@ -30,6 +30,82 @@ body {
 }
 
 @layer base {
+    :root {
+        --background: 220 15% 95%;
+        --foreground: 210 10% 20%;
+        --card: 220 15% 95%;
+        --card-foreground: 210 10% 20%;
+        --popover: 220 15% 95%;
+        --popover-foreground: 210 10% 20%;
+        --primary: 204 60% 50%;
+        --primary-foreground: 204 80% 95%;
+        --secondary: 215 15% 80%;
+        --secondary-foreground: 210 25% 20%;
+        --muted: 215 10% 90%;
+        --muted-foreground: 210 15% 40%;
+        --accent: 215 10% 90%;
+        --accent-foreground: 210 10% 20%;
+        --destructive: 0 80% 55%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 215 15% 80%;
+        --input: 215 15% 80%;
+        --ring: 204 60% 50%;
+        --radius: 0.5rem;
+        --chart-1: 204 60% 50%;
+        --chart-2: 210 40% 60%;
+        --chart-3: 220 70% 50%;
+        --chart-4: 192 50% 60%;
+        --chart-5: 240 25% 50%;
+
+        --sidebar-background: 220 15% 92%;
+        --sidebar-foreground: 210 10% 38%;
+        --sidebar-primary: 204 60% 47%;
+        --sidebar-primary-foreground: 204 80% 100%;
+        --sidebar-accent: 215 10% 87%;
+        --sidebar-accent-foreground: 210 10% 20%;
+        --sidebar-border: 215 15% 77%;
+        --sidebar-ring: 204 60% 47%;
+    }
+
+    .dark {
+        --background: 220 15% 10%;
+        --foreground: 204 50% 90%;
+        --card: 220 15% 10%;
+        --card-foreground: 204 50% 90%;
+        --popover: 220 15% 10%;
+        --popover-foreground: 204 50% 90%;
+        --primary: 204 60% 50%;
+        --primary-foreground: 204 80% 95%;
+        --secondary: 215 15% 30%;
+        --secondary-foreground: 204 50% 80%;
+        --muted: 215 10% 20%;
+        --muted-foreground: 210 40% 70%;
+        --accent: 215 10% 20%;
+        --accent-foreground: 204 50% 90%;
+        --destructive: 0 80% 50%;
+        --destructive-foreground: 204 90% 95%;
+        --border: 215 15% 30%;
+        --input: 215 15% 30%;
+        --ring: 204 60% 50%;
+        --radius: 0.5rem;
+        --chart-1: 210 50% 40%;
+        --chart-2: 204 80% 50%;
+        --chart-3: 220 60% 50%;
+        --chart-4: 192 40% 50%;
+        --chart-5: 240 25% 60%;
+
+        --sidebar-background: 220 15% 2%;
+        --sidebar-foreground: 204 50% 50%;
+        --sidebar-primary: 204 60% 42%;
+        --sidebar-primary-foreground: 204 80% 100%;
+        --sidebar-accent: 215 10% 12%;
+        --sidebar-accent-foreground: 204 50% 90%;
+        --sidebar-border: 215 15% 22%;
+        --sidebar-ring: 204 60% 42%;
+    }
+}
+
+/* @layer base {
     :root {
         --background: 0 0% 100%;
         --foreground: 240 10% 3.9%;
@@ -83,7 +159,7 @@ body {
         --chart-4: 280 65% 60%;
         --chart-5: 340 75% 55%;
     }
-}
+} */
 
 @layer base {
     * {