feat(public): implement dark mode

This commit is contained in:
riefive
2025-09-16 12:51:36 +07:00
parent e02360aea5
commit 01057b9138
4 changed files with 55 additions and 52 deletions

No files matched your search

+8 -8
View File
@@ -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>
+3 -3
View File
@@ -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>