From 23081d86858e2047c336eafa0c5f09d34b5ca9bc Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 2 Feb 2025 18:44:05 +0100
Subject: [PATCH] add color theme with dark and light mode!

---
 src/assets/index.css             | 172 ++++++++++++++++++-------------
 src/components/ThemeToggle.vue   |  38 +++++++
 src/components/layout/Footer.vue |   6 +-
 src/components/layout/Navbar.vue |  14 ++-
 tailwind.config.js               |  81 +++++++--------
 5 files changed, 184 insertions(+), 127 deletions(-)
 create mode 100644 src/components/ThemeToggle.vue

diff --git a/src/assets/index.css b/src/assets/index.css
index 4e4399b..118bb00 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -1,76 +1,100 @@
 @import "tailwindcss";
 
-/* @layer base { */
-/*   :root { */
-/*     --background: 0 0% 100%; */
-/*     --foreground: 222.2 84% 4.9%; */
-/**/
-/*     --muted: 210 40% 96.1%; */
-/*     --muted-foreground: 215.4 16.3% 46.9%; */
-/**/
-/*     --popover: 0 0% 100%; */
-/*     --popover-foreground: 222.2 84% 4.9%; */
-/**/
-/*     --card: 0 0% 100%; */
-/*     --card-foreground: 222.2 84% 4.9%; */
-/**/
-/*     --border: 214.3 31.8% 91.4%; */
-/*     --input: 214.3 31.8% 91.4%; */
-/**/
-/*     --primary: 222.2 47.4% 11.2%; */
-/*     --primary-foreground: 210 40% 98%; */
-/**/
-/*     --secondary: 210 40% 96.1%; */
-/*     --secondary-foreground: 222.2 47.4% 11.2%; */
-/**/
-/*     --accent: 210 40% 96.1%; */
-/*     --accent-foreground: 222.2 47.4% 11.2%; */
-/**/
-/*     --destructive: 0 84.2% 60.2%; */
-/*     --destructive-foreground: 210 40% 98%; */
-/**/
-/*     --ring: 222.2 84% 4.9%; */
-/**/
-/*     --radius: 0.5rem; */
-/*   } */
-/**/
-/*   .dark { */
-/*     --background: 222.2 84% 4.9%; */
-/*     --foreground: 210 40% 98%; */
-/**/
-/*     --muted: 217.2 32.6% 17.5%; */
-/*     --muted-foreground: 215 20.2% 65.1%; */
-/**/
-/*     --popover: 222.2 84% 4.9%; */
-/*     --popover-foreground: 210 40% 98%; */
-/**/
-/*     --card: 222.2 84% 4.9%; */
-/*     --card-foreground: 210 40% 98%; */
-/**/
-/*     --border: 217.2 32.6% 17.5%; */
-/*     --input: 217.2 32.6% 17.5%; */
-/**/
-/*     --primary: 210 40% 98%; */
-/*     --primary-foreground: 222.2 47.4% 11.2%; */
-/**/
-/*     --secondary: 217.2 32.6% 17.5%; */
-/*     --secondary-foreground: 210 40% 98%; */
-/**/
-/*     --accent: 217.2 32.6% 17.5%; */
-/*     --accent-foreground: 210 40% 98%; */
-/**/
-/*     --destructive: 0 62.8% 30.6%; */
-/*     --destructive-foreground: 210 40% 98%; */
-/**/
-/*     --ring: 212.7 26.8% 83.9%; */
-/*   } */
-/* } */
-/**/
-/* @layer base { */
-/*   * { */
-/*     @apply border-border; */
-/*   } */
-/*   body { */
-/*     @apply bg-background text-foreground; */
-/*   } */
-/* } */
+@layer base {
+  :root {
+    --color-background: hsl(32 92% 87%); /* bg0 */
+    --color-foreground: hsl(40 13% 23%); /* fg */
+
+    --color-card: hsl(39 59% 88%); /* bg1 */
+    --color-card-foreground: hsl(40 13% 23%); /* fg */
+ 
+    --color-popover: hsl(39 59% 88%); /* bg1 */
+    --color-popover-foreground: hsl(40 13% 23%); /* fg */
+ 
+    --color-primary: hsl(0 100% 31%); /* red */
+    --color-primary-foreground: hsl(40 92% 88%); /* bg */
+ 
+    --color-secondary: hsl(39 46% 81%); /* bg2 */
+    --color-secondary-foreground: hsl(40 13% 23%); /* fg */
+ 
+    --color-muted: hsl(37 29% 73%); /* bg3 */
+    --color-muted-foreground: hsl(40 4% 36%); /* gray */
+ 
+    --color-accent: hsl(40 71% 49%); /* yellow */
+    --color-accent-foreground: hsl(0 0% 16%);
+ 
+    --color-destructive: hsl(0 76% 46%); /* bright_red */
+    --color-destructive-foreground: hsl(40 92% 88%); /* bg */
+ 
+    --color-border: hsl(33 14% 59%); /* fg4 */
+    --color-input: hsl(33 14% 59%); /* fg4 */
+    --color-ring: hsl(0 100% 31%); /* red */
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --color-background: hsl(0 0% 16%); /* bg0 */
+    --color-foreground: hsl(40 92% 88%); /* fg */
+ 
+    --color-card: hsl(0 7% 23%); /* bg1 */
+    --color-card-foreground: hsl(40 92% 88%); /* fg */
+ 
+    --color-popover: hsl(0 7% 23%); /* bg1 */
+    --color-popover-foreground: hsl(40 92% 88%); /* fg */
+ 
+    --color-primary: hsl(6 93% 59%); /* red */
+    --color-primary-foreground: hsl(0 0% 16%); /* bg */
+ 
+    --color-secondary: hsl(0 5% 29%); /* bg2 */
+    --color-secondary-foreground: hsl(40 92% 88%); /* fg */
+ 
+    --color-muted: hsl(20 6% 36%); /* bg3 */
+    --color-muted-foreground: hsl(33 14% 59%); /* gray */
+ 
+    --color-accent: hsl(42 95% 58%); /* yellow */
+    --color-accent-foreground: hsl(0 0% 16%);
+ 
+    --color-destructive: hsl(6 93% 59%); /* bright_red */
+    --color-destructive-foreground: hsl(40 92% 88%); /* bg */
+ 
+    --color-border: hsl(24 10% 51%); /* fg4 */
+    --color-input: hsl(24 10% 51%); /* fg4 */
+    --color-ring: hsl(6 93% 59%); /* red */
+  }
+
+  * {
+    @apply box-border;
+  }
+  
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@utility bg-background {
+  background-color: var(--color-background);
+}
+
+@utility text-foreground {
+  color: var(--color-foreground);
+}
+
+/* Add other utility classes for colors */
+@utility bg-card {
+  background-color: var(--color-card);
+}
+
+@utility text-card-foreground {
+  color: var(--color-card-foreground);
+}
+
+@utility bg-primary {
+  background-color: var(--color-primary);
+}
+
+@utility text-primary-foreground {
+  color: var(--color-primary-foreground);
+}
+
+/* ... add other utility classes as needed ... */
diff --git a/src/components/ThemeToggle.vue b/src/components/ThemeToggle.vue
new file mode 100644
index 0000000..4b1cec2
--- /dev/null
+++ b/src/components/ThemeToggle.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { Moon, Sun } from 'lucide-vue-next'
+import { Button } from '@/components/ui/button'
+
+const isDark = ref(false)
+
+const toggleTheme = () => {
+  isDark.value = !isDark.value
+  updateTheme()
+}
+
+const updateTheme = () => {
+  if (isDark.value) {
+    document.documentElement.classList.add('dark')
+    localStorage.setItem('theme', 'dark')
+  } else {
+    document.documentElement.classList.remove('dark')
+    localStorage.setItem('theme', 'light')
+  }
+}
+
+onMounted(() => {
+  const savedTheme = localStorage.getItem('theme')
+  isDark.value = 
+    savedTheme === 'dark' || 
+    (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  updateTheme()
+})
+</script>
+
+<template>
+  <Button variant="ghost" size="icon" @click="toggleTheme">
+    <Sun v-if="isDark" class="h-5 w-5" />
+    <Moon v-else class="h-5 w-5" />
+    <span class="sr-only">Toggle theme</span>
+  </Button>
+</template> 
\ No newline at end of file
diff --git a/src/components/layout/Footer.vue b/src/components/layout/Footer.vue
index 8f45d95..21c2f14 100644
--- a/src/components/layout/Footer.vue
+++ b/src/components/layout/Footer.vue
@@ -3,9 +3,9 @@ const currentYear = new Date().getFullYear()
 </script>
 
 <template>
-  <footer class="border-t mt-auto">
-    <div class="container mx-auto px-4 py-6">
-      <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
+  <footer class="bg-card border-t border-border">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <div class="flex h-16 items-center justify-between">
         <!-- Powered by section -->
         <div class="flex items-center space-x-2 text-sm text-muted-foreground">
           <span>Powered by</span>
diff --git a/src/components/layout/Navbar.vue b/src/components/layout/Navbar.vue
index 1836d2c..83ac925 100644
--- a/src/components/layout/Navbar.vue
+++ b/src/components/layout/Navbar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { Menu, X } from 'lucide-vue-next'
+import ThemeToggle from '@/components/ThemeToggle.vue'
 
 const isOpen = ref(false)
 
@@ -16,14 +17,14 @@ const toggleMenu = () => {
 </script>
 
 <template>
-  <nav class="bg-white shadow-sm">
+  <nav class="bg-card border-b border-border">
     <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
       <div class="flex h-16 justify-between">
         <!-- Logo and Desktop Navigation -->
         <div class="flex">
           <div class="flex flex-shrink-0 items-center">
             <!-- Replace with your logo -->
-            <router-link to="/" class="text-xl font-bold">
+            <router-link to="/" class="text-xl font-bold text-card-foreground">
               ⚡️ Lightning Directory
             </router-link>
           </div>
@@ -37,8 +38,8 @@ const toggleMenu = () => {
               class="inline-flex items-center px-1 pt-1 text-sm font-medium"
               :class="[
                 $route.path === item.href
-                  ? 'border-b-2 border-primary text-gray-900'
-                  : 'text-gray-500 hover:border-b-2 hover:border-gray-300 hover:text-gray-700'
+                  ? 'border-b-2 border-primary text-card-foreground'
+                  : 'text-muted-foreground hover:border-b-2 hover:border-muted hover:text-card-foreground'
               ]"
             >
               {{ item.name }}
@@ -46,6 +47,11 @@ const toggleMenu = () => {
           </div>
         </div>
 
+        <!-- Theme Toggle -->
+        <div class="flex items-center">
+          <ThemeToggle />
+        </div>
+
         <!-- Mobile menu button -->
         <div class="flex items-center sm:hidden">
           <button
diff --git a/tailwind.config.js b/tailwind.config.js
index 9ced25c..fa36ab8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,7 +11,7 @@ module.exports = {
     './components/**/*.{ts,tsx,vue}',
     './app/**/*.{ts,tsx,vue}',
     './src/**/*.{ts,tsx,vue}',
-	],
+  ],
   
   theme: {
     container: {
@@ -23,69 +23,58 @@ module.exports = {
     },
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+        background: 'var(--color-background)',
+        foreground: 'var(--color-foreground)',
+        card: {
+          DEFAULT: 'var(--color-card)',
+          foreground: 'var(--color-card-foreground)',
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: 'var(--color-popover)',
+          foreground: 'var(--color-popover-foreground)',
         },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+        primary: {
+          DEFAULT: 'var(--color-primary)',
+          foreground: 'var(--color-primary-foreground)',
         },
+        secondary: {
+          DEFAULT: 'var(--color-secondary)',
+          foreground: 'var(--color-secondary-foreground)',
+        },
+        muted: {
+          DEFAULT: 'var(--color-muted)',
+          foreground: 'var(--color-muted-foreground)',
+        },
+        accent: {
+          DEFAULT: 'var(--color-accent)',
+          foreground: 'var(--color-accent-foreground)',
+        },
+        destructive: {
+          DEFAULT: 'var(--color-destructive)',
+          foreground: 'var(--color-destructive-foreground)',
+        },
+        border: 'var(--color-border)',
+        input: 'var(--color-input)',
+        ring: 'var(--color-ring)',
       },
       borderRadius: {
-        xl: "calc(var(--radius) + 4px)",
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
       },
       keyframes: {
         "accordion-down": {
-          from: { height: 0 },
+          from: { height: "0" },
           to: { height: "var(--radix-accordion-content-height)" },
         },
         "accordion-up": {
           from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-        "collapsible-down": {
-          from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
-        },
-        "collapsible-up": {
-          from: { height: 'var(--radix-collapsible-content-height)' },
-          to: { height: 0 },
+          to: { height: "0" },
         },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
-        "collapsible-down": "collapsible-down 0.2s ease-in-out",
-        "collapsible-up": "collapsible-up 0.2s ease-in-out",
       },
     },
   },