From 01057b9138617bfba0a9c325b0e635af77c00649 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Tue, 16 Sep 2025 12:51:36 +0700
Subject: [PATCH] feat(public): implement dark mode

---
 app/assets/css/main.css                    | 72 +++++++++++-----------
 app/components/content/dashboard/index.vue | 16 ++---
 app/components/layout/ThemeToggle.vue      |  6 +-
 app/layouts/default.vue                    | 13 ++--
 4 files changed, 55 insertions(+), 52 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 4c488385..7aab15b5 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -67,41 +67,43 @@
   --sidebar-accent-foreground: 240 5.9% 10%;
   --sidebar-border: 220 13% 91%;
   --sidebar-ring: 217.2 91.2% 59.8%;
-  /* .dark { */
-  /*   --background: 210 25% 8%; */
-  /*   --foreground: 210 20% 95%; */
-  /*   --card: 210 25% 10%; */
-  /*   --card-foreground: 210 20% 95%; */
-  /*   --popover: 210 25% 10%; */
-  /*   --popover-foreground: 210 20% 95%; */
-  /*   --primary: 150 75% 45%; */
-  /*   --primary-foreground: 0 0% 100%; */
-  /*   --primary-hover: 150 75% 50%; */
-  /*   --secondary: 210 25% 15%; */
-  /*   --secondary-foreground: 210 20% 90%; */
-  /*   --muted: 210 25% 15%; */
-  /*   --muted-foreground: 210 15% 65%; */
-  /*   --accent: 210 100% 55%; */
-  /*   --accent-foreground: 0 0% 100%; */
-  /*   --destructive: 0 75% 60%; */
-  /*   --destructive-foreground: 0 0% 100%; */
-  /*   --border: 210 25% 20%; */
-  /*   --input: 210 25% 15%; */
-  /*   --ring: 150 75% 45%; */
-  /*   --success: 150 75% 50%; */
-  /*   --warning: 45 95% 65%; */
-  /*   --info: 210 100% 60%; */
-  /*   --gradient-primary: linear-gradient(135deg, hsl(150 75% 45%), hsl(150 75% 55%)); */
-  /*   --gradient-medical: linear-gradient(135deg, hsl(150 75% 45%), hsl(210 100% 55%)); */
-  /*   --gradient-subtle: linear-gradient(180deg, hsl(210 25% 8%), hsl(210 25% 12%)); */
-  /*   --sidebar-background: 240 5.9% 10%; */
-  /*   --sidebar-foreground: 240 4.8% 95.9%; */
-  /*   --sidebar-primary: 224.3 76.3% 48%; */
-  /*   --sidebar-primary-foreground: 0 0% 100%; */
-  /*   --sidebar-accent: 240 3.7% 15.9%; */
-  /*   --sidebar-accent-foreground: 240 4.8% 95.9%; */
-  /*   --sidebar-border: 240 3.7% 15.9%; */
-  /*   --sidebar-ring: 217.2 91.2% 59.8%; */
+}
+
+.dark {
+  --background: 210 25% 8%;
+  --foreground: 210 20% 95%;
+  --card: 210 25% 10%;
+  --card-foreground: 210 20% 95%;
+  --popover: 210 25% 10%;
+  --popover-foreground: 210 20% 95%;
+  --primary: 150 75% 45%;
+  --primary-foreground: 0 0% 100%;
+  --primary-hover: 150 75% 50%;
+  --secondary: 210 25% 15%;
+  --secondary-foreground: 210 20% 90%;
+  --muted: 210 25% 15%;
+  --muted-foreground: 210 15% 65%;
+  --accent: 210 100% 55%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 75% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 210 25% 20%;
+  --input: 210 25% 15%;
+  --ring: 150 75% 45%;
+  --success: 150 75% 50%;
+  --warning: 45 95% 65%;
+  --info: 210 100% 60%;
+  --gradient-primary: linear-gradient(135deg, hsl(150 75% 45%), hsl(150 75% 55%));
+  --gradient-medical: linear-gradient(135deg, hsl(150 75% 45%), hsl(210 100% 55%));
+  --gradient-subtle: linear-gradient(180deg, hsl(210 25% 8%), hsl(210 25% 12%));
+  --sidebar-background: 240 5.9% 10%;
+  --sidebar-foreground: 240 4.8% 95.9%;
+  --sidebar-primary: 224.3 76.3% 48%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 240 3.7% 15.9%;
+  --sidebar-accent-foreground: 240 4.8% 95.9%;
+  --sidebar-border: 240 3.7% 15.9%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
 }
 
 /* Keyframes for Animations */
diff --git a/app/components/content/dashboard/index.vue b/app/components/content/dashboard/index.vue
index 2195b428..80809852 100644
--- a/app/components/content/dashboard/index.vue
+++ b/app/components/content/dashboard/index.vue
@@ -113,7 +113,7 @@ onMounted(() => {
     <div class="mt-4 flex flex-wrap items-center justify-between gap-2">
       <h2 class="text-2xl font-bold tracking-tight">Dashboard SIMRS</h2>
       <div class="flex items-center gap-4 space-x-2">
-        <div class="bg-primary rounded-xl border p-1 text-white">Status: Aktif</div>
+        <div class="rounded-xl border bg-primary p-1 text-white">Status: Aktif</div>
         <Button class="bg-primary p-2 text-white" size="lg">
           <Icon name="i-lucide-refresh-ccw" class="h-6 w-6" />
           Sinkronisasi
@@ -143,7 +143,7 @@ onMounted(() => {
                 <p class="text-sm font-medium leading-none">
                   {{ recentSales.name }}
                 </p>
-                <p class="text-muted-foreground text-sm">
+                <p class="text-sm text-muted-foreground">
                   {{ recentSales.email }}
                 </p>
               </div>
@@ -156,19 +156,19 @@ onMounted(() => {
         <Card>
           <CardHeader>
             <div class="flex flex-wrap items-center gap-2">
-              <Icon name="i-lucide-activity" class="text-primary me-2 h-6 w-6" />
+              <Icon name="i-lucide-activity" class="me-2 h-6 w-6 text-primary" />
               <h2 class="text-xl font-semibold tracking-tight">Aksi Cepat</h2>
             </div>
           </CardHeader>
           <CardContent class="grid cursor-pointer gap-8 md:grid-cols-4 md:gap-8">
             <Card
-            v-for="item in linkItems"
-            :key="item.title"
-              class="border-primary hover:bg-primary my-2 h-32 border transition-colors duration-200 hover:bg-gray-200"
-              >
+              v-for="item in linkItems"
+              :key="item.title"
+              class="my-2 h-32 border border-primary transition-colors duration-200 hover:bg-gray-200 hover:bg-primary"
+            >
               <NuxtLink :to="item.link">
                 <CardContent class="my-2 grid h-full grid-rows-2 place-items-center">
-                  <Icon :name="item.icon" class="text-primary h-9 w-[60px]" />
+                  <Icon :name="item.icon" class="h-9 w-[60px] text-primary" />
                   <h1>{{ item.title }}</h1>
                 </CardContent>
               </NuxtLink>
diff --git a/app/components/layout/ThemeToggle.vue b/app/components/layout/ThemeToggle.vue
index 5310ddcc..d59dd19f 100644
--- a/app/components/layout/ThemeToggle.vue
+++ b/app/components/layout/ThemeToggle.vue
@@ -6,10 +6,10 @@ const { theme, toggleTheme } = useTheme()
 <template>
   <button
     @click="toggleTheme"
-    class="ml-2 flex items-center rounded border px-2 py-1"
+    class="ml-2 rounded border px-2 py-1 text-sm"
     :title="theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
   >
-    <span v-if="theme === 'dark'"><Icon name="i-lucide-moon" class="h-4 w-4" /></span>
-    <span v-else><Icon name="i-lucide-sun" class="h-4 w-4" /></span>
+    <span v-if="theme === 'dark'"><Icon name="i-lucide-moon" class="h-4 w-4 mt-1" /></span>
+    <span v-else><Icon name="i-lucide-sun" class="h-4 w-4 mt-1" /></span>
   </button>
 </template>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 7f5959b7..7bce9c00 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -56,9 +56,9 @@ const contentContent = computed(() => {
   margin-right: auto;
   padding: 0.75rem; /* p-3 */
   padding-bottom: 5rem; /* pb-20 */
-  border-width: 1px;
-  background-color: white !important;
+  background-color: hsl(var(--background));
   border-radius: 0.375rem;
+  border: 1px solid hsl(var(--border));
   border-color: rgb(226 232 240); /* slate-200 */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
@@ -78,18 +78,19 @@ const contentContent = computed(() => {
 .cf-frame-width {
   margin-left: auto;
   margin-right: auto;
-  background-color: white;
-  border: 1px solid rgb(226 232 240);
+  background-color: hsl(var(--background));
   border-radius: 0.375rem;
+  border: 1px solid hsl(var(--border));
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
+
 .cf-frame {
   margin-left: auto;
   margin-right: auto;
   padding: 0.75rem;
-  background-color: white;
+  background-color: hsl(var(--background));
   border-radius: 0.375rem;
-  border: 1px solid rgb(226 232 240);
+  border: 1px solid hsl(var(--border));
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 </style>