Skip to content

Commit 24e3882

Browse files
zackhazackha
committed
feat: add light-mode
1 parent 66e042d commit 24e3882

File tree

3 files changed

+29
-27
lines changed

3 files changed

+29
-27
lines changed

‎app.vue‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,20 @@
44
<Header />
55
<div role="tablist" class="mb-4 flex max-w-full flex-col items-stretch">
66
<div class="flex flex-row flex-nowrap items-center gap-4">
7-
<div class="flex flex-shrink flex-grow flex-col font-medium text-neutral-300">
7+
<div class="flex flex-shrink flex-grow flex-col text-sm font-semibold text-neutral-600 dark:text-neutral-200">
88
<form
9-
class="group flex h-10 flex-grow rounded-xl border border-transparent bg-white/10 pl-4 pr-3 transition-all focus-within:border-neutral-600 focus-within:bg-neutral-800/30 hover:border-neutral-600">
9+
class="group flex h-10 flex-grow rounded-xl border border-transparent bg-neutral-800/5 dark:bg-white/10 pl-4 pr-3 transition-all focus-within:border-neutral-400 focus-within:dark:border-neutral-600 focus-within:bg-white/30 focus-within:dark:bg-neutral-800/30 hover:border-neutral-300 hover:focus-within:border-neutral-400 hover:dark:border-neutral-600">
1010
<div class="flex w-full items-center gap-4">
11-
<div class="flex text-neutral-500">
12-
<Icon name="majesticons:search-line" size="22"></Icon>
11+
<div class="flex text-neutral-500 dark:text-neutral-400">
12+
<Icon name="majesticons:search-line" size="20"></Icon>
1313
</div>
1414
<div class="flex w-full">
1515
<input
16-
class="w-full bg-transparent py-2 outline-none placeholder:text-neutral-500"
16+
class="w-full bg-transparent py-2 outline-none placeholder:text-neutral-400 placeholder:dark:text-neutral-500"
1717
v-model="searchTerm"
1818
:placeholder="selectedCategory ? `Search in ${selectedCategory}` : 'Search'" />
1919
</div>
20-
<div @click="searchTerm = ''" class="invisible flex cursor-pointer text-neutral-500 transition-all group-focus-within:visible">
20+
<div @click="searchTerm = ''" class="invisible flex cursor-pointer text-neutral-300 dark:text-neutral-500 transition-all group-focus-within:visible">
2121
<Icon v-if="!loading" name="solar:close-square-bold" size="24" />
2222
<Icon v-else-if="loading" name="Loading" size="20" />
2323
</div>
@@ -30,16 +30,17 @@
3030
isDropdownSortBy = false;
3131
"
3232
class="relative cursor-pointer select-none items-center justify-center text-sm font-semibold">
33-
<div class="box-border flex h-10 items-center rounded-xl bg-white/10 py-1.5 pl-4 pr-3 transition-all hover:bg-white/20 active:scale-95">
33+
<div
34+
class="box-border flex h-10 items-center rounded-xl py-1.5 pl-4 pr-3 transition-all bg-neutral-800/5 hover:bg-neutral-800/10 dark:bg-white/10 hover:dark:bg-white/20 active:scale-95">
3435
<span class="mr-3">{{ selectedCategory || 'All Categories' }}</span>
3536
<Icon name="ion:chevron-down-outline" size="14" />
3637
</div>
3738
<Transition>
3839
<div
3940
v-if="isDropdownCategory"
40-
class="absolute left-0 top-full z-10 mt-3 rounded-xl border border-white/10 text-[13px] font-medium backdrop-blur-xl dark:bg-neutral-800/80">
41+
class="absolute left-0 top-full z-10 mt-3 rounded-xl border border-neutral-800/10 dark:border-white/10 text-[13px] font-medium backdrop-blur-xl bg-white/90 dark:bg-neutral-800/80 shadow-lg">
4142
<div class="m-2 w-44">
42-
<div @click="selectedCategory = ''" class="rounded-lg px-3 py-2 transition-all duration-300 hover:bg-white/5">
43+
<div @click="selectedCategory = ''" class="rounded-lg px-3 py-2 transition-all duration-300 hover:bg-neutral-800/5 hover:dark:bg-white/5">
4344
<div class="flex items-center justify-between">
4445
<div class="mr-4 w-full">All Categories</div>
4546
<Icon v-if="selectedCategory === ''" name="mingcute:check-line" size="16" />
@@ -49,7 +50,7 @@
4950
v-for="category in categories"
5051
:key="category.id"
5152
@click="selectedCategory = category.name"
52-
class="rounded-lg px-3 py-2 transition-all duration-300 hover:bg-white/5">
53+
class="rounded-lg px-3 py-2 transition-all duration-300 hover:bg-neutral-800/5 hover:dark:bg-white/5">
5354
<div class="flex items-center justify-between">
5455
<div class="mr-4 w-full">{{ category.name }}</div>
5556
<Icon v-if="selectedCategory === category.name" name="mingcute:check-line" size="16" />
@@ -65,20 +66,21 @@
6566
isDropdownCategory = false;
6667
"
6768
class="relative cursor-pointer select-none items-center justify-center text-sm font-semibold">
68-
<div class="box-border flex h-10 items-center rounded-xl bg-white/10 py-1.5 pl-4 pr-3 transition-all hover:bg-white/20 active:scale-95">
69+
<div
70+
class="box-border flex h-10 items-center rounded-xl py-1.5 pl-4 pr-3 transition-all bg-neutral-800/5 hover:bg-neutral-800/10 dark:bg-white/10 hover:dark:bg-white/20 active:scale-95">
6971
<span class="mr-3">{{ selectedOption }}</span>
7072
<Icon name="ion:chevron-down-outline" size="14" />
7173
</div>
7274
<Transition>
7375
<div
7476
v-if="isDropdownSortBy"
75-
class="absolute right-0 top-full z-10 mt-3 rounded-xl border border-white/10 text-[13px] font-medium backdrop-blur-xl dark:bg-neutral-800/80">
77+
class="absolute right-0 top-full z-10 mt-3 rounded-xl border border-neutral-800/10 dark:border-white/10 text-[13px] font-medium backdrop-blur-xl bg-white/90 dark:bg-neutral-800/80 shadow-lg">
7678
<div class="m-2 w-44">
7779
<div
7880
v-for="(option, index) in options"
7981
:key="index"
8082
@click="selectedOption = option.value"
81-
class="rounded-lg px-3 py-2 transition-all duration-300 hover:bg-white/5">
83+
class="rounded-lg px-3 py-2 transition-all duration-300 hover:bg-neutral-800/5 hover:dark:bg-white/5">
8284
<div class="flex items-center justify-between">
8385
<div class="mr-4 w-full">{{ option.value }}</div>
8486
<Icon v-if="selectedOption === option.value" name="mingcute:check-line" size="16" />
@@ -94,40 +96,40 @@
9496
<div
9597
v-for="node in products"
9698
:key="node.id"
97-
class="group cursor-pointer rounded-2xl border border-neutral-800 p-2 transition-all hover:border-neutral-600 hover:bg-neutral-800/40">
99+
class="group cursor-pointer rounded-2xl border border-neutral-200 dark:border-neutral-800 p-2 transition-all hover:border-neutral-300 hover:dark:border-neutral-600">
98100
<div class="relative mb-3 pb-[133%]">
99101
<NuxtImg
100102
loading="lazy"
101103
:title="node.name"
102104
:alt="node.image.altText || node.name"
103105
:src="node.galleryImages.nodes[0].sourceUrl"
104-
class="absolute h-full w-full rounded-lg bg-neutral-800 object-cover" />
106+
class="absolute h-full w-full rounded-lg dark:bg-neutral-800 bg-neutral-200 object-cover" />
105107
<NuxtImg
106108
loading="lazy"
107109
:title="node.name"
108110
:alt="node.image.altText || node.name"
109111
:src="node.image.sourceUrl"
110-
class="absolute h-full w-full rounded-lg bg-neutral-800 object-cover transition-opacity duration-300 group-hover:opacity-0" />
112+
class="absolute h-full w-full rounded-lg dark:bg-neutral-800 bg-neutral-200 object-cover transition-opacity duration-300 group-hover:opacity-0" />
111113
</div>
112114
<div class="mb-1 grid grid-flow-col gap-6 px-2 text-sm font-semibold">
113115
<div class="flex min-w-0 flex-col justify-between gap-1">
114-
<div class="text-xs text-neutral-400">
116+
<div class="text-xs text-secondary-text dark:text-secondary-text-d transition-all hover:text-black hover:dark:text-neutral-100">
115117
{{ node.allPaUrunTipi.nodes[0].name }}
116118
</div>
117119
<div :title="node.name" class="overflow-hidden text-ellipsis whitespace-nowrap">
118120
{{ node.name }}
119121
</div>
120122
</div>
121123
<div class="flex flex-col gap-1 text-right">
122-
<div class="text-xs text-neutral-400 line-through" v-html="node.regularPrice"></div>
123-
<div class="font-bold text-[#ff0000]" v-html="node.salePrice"></div>
124+
<div class="text-xs text-secondary-text dark:text-secondary-text-d line-through" v-html="node.regularPrice"></div>
125+
<div class="font-bold text-[#d9000c] dark:text-[#ff0000]" v-html="node.salePrice"></div>
124126
</div>
125127
</div>
126128
</div>
127129
<ProductSkeleton v-if="loading" />
128130
</div>
129131
<div v-if="!empty && !loading" class="p-6 text-center text-lg">
130-
<Icon name="heroicons-outline:magnifying-glass" size="99"></Icon>
132+
<Icon name="majesticons:search-line" size="99"></Icon>
131133
<div class="py-4">
132134
<span v-if="selectedCategory">
133135
In the <strong>{{ selectedCategory }}</strong> category,

‎components/ProductSkeleton.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<template>
2-
<div v-for="i in 9" :key="i" class="animate-pulse rounded-2xl border border-neutral-800 p-2">
2+
<div v-for="i in 9" :key="i" class="animate-pulse rounded-2xl border border-neutral-200 dark:border-neutral-800 p-2">
33
<div class="relative mb-3 pb-[133%]">
4-
<div class="absolute h-full w-full rounded-lg bg-neutral-800"></div>
4+
<div class="absolute h-full w-full rounded-lg bg-neutral-200 dark:bg-neutral-800"></div>
55
</div>
66
<div class="mb-1 grid grid-flow-row-dense grid-cols-3 px-2">
77
<div class="col-span-2 flex min-w-0 flex-col justify-between gap-2">
8-
<div class="h-8 w-2/4 rounded bg-neutral-800"></div>
9-
<div class="h-full w-full rounded bg-neutral-800"></div>
8+
<div class="h-8 w-2/4 rounded bg-neutral-200 dark:bg-neutral-800"></div>
9+
<div class="h-full w-full rounded bg-neutral-200 dark:bg-neutral-800"></div>
1010
</div>
1111
<div class="flex flex-col items-end gap-2">
12-
<div class="h-8 w-2/3 rounded bg-neutral-800"></div>
13-
<div class="h-full w-3/4 rounded bg-neutral-800"></div>
12+
<div class="h-8 w-2/3 rounded bg-neutral-200 dark:bg-neutral-800"></div>
13+
<div class="h-full w-3/4 rounded bg-neutral-200 dark:bg-neutral-800"></div>
1414
</div>
1515
</div>
1616
</div>

‎components/footer/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<div>
88
<button
99
@click="toggleDark"
10-
class="box-border flex h-8 items-center gap-1.5 rounded-lg bg-neutral-800/10 p-2 transition-all hover:bg-neutral-800/20 hover:text-black active:scale-95 dark:bg-white/10 hover:dark:bg-white/20 hover:dark:text-neutral-100">
10+
class="box-border flex h-8 items-center gap-1.5 rounded-lg p-2 transition-all bg-neutral-800/5 hover:bg-neutral-800/10 hover:text-black active:scale-95 dark:bg-white/10 hover:dark:bg-white/20 hover:dark:text-neutral-100">
1111
<div class="flex"><Icon :name="colorModeIcon" size="16" /></div>
1212
<div class="capitalize leading-3">{{ colorMode.preference }}</div>
1313
</button>

0 commit comments

Comments
 (0)