munawwirul_jamal/simrsx-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(public): implement dark mode

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/css/main.css
+37 -35
View File
@@ -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 */
app/components/content/dashboard/index.vue
+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>
app/components/layout/ThemeToggle.vue
+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>
app/layouts/default.vue
+7 -6
View File
@@ -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>