Skip to content

Commit 5ffb27a

Browse files
kirklinkirklin
committed
feat: fix daisy theme
1 parent f4a6a0f commit 5ffb27a

File tree

5 files changed

+118
-29
lines changed

5 files changed

+118
-29
lines changed

‎src/layouts/Navbar/components/LocalesChange/index.vue‎

Lines changed: 59 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ defineOptions({
77
name: "LocalesChange",
88
});
99
const { availableLocales, locale } = useI18n();
10+
11+
// 创建一个排序后的语言列表
12+
const sortedLocales = availableLocales.sort((a, b) => {
13+
const aIndex = languagesNameList.findIndex(item => item.code === a);
14+
const bIndex = languagesNameList.findIndex(item => item.code === b);
15+
return aIndex - bIndex;
16+
});
17+
1018
function ChangeLocales(lang: string) {
1119
locale.value = lang;
1220
const localedLang = useLocalStorage("locale", "zh");
@@ -15,25 +23,59 @@ function ChangeLocales(lang: string) {
1523
</script>
1624

1725
<template>
18-
<div title="Change Locales" class="dropdown dropdown-end">
19-
<div tabindex="0" class="gap-1 btn btn-ghost btn-sm">
20-
<UnoCSSIconButton icon="i-tabler-language" />
21-
<span class="hidden md:inline" />
22-
<UnoCSSIconButton icon="i-tabler-chevron-down" />
26+
<div class="dropdown dropdown-end">
27+
<div
28+
tabindex="0"
29+
role="button"
30+
class="gap-1 font-bold btn btn-ghost btn-sm"
31+
aria-label="Language"
32+
title="Change Language"
33+
>
34+
<svg class="size-4 text-base-content/70" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
35+
<path
36+
stroke-linejoin="round"
37+
stroke-linecap="round"
38+
stroke-width="2"
39+
fill="none"
40+
stroke="currentColor"
41+
d="M12 21a9 9 0 1 0 0-18m0 18a9 9 0 1 1 0-18m0 18c2.761 0 3.941-5.163 3.941-9S14.761 3 12 3m0 18c-2.761 0-3.941-5.163-3.941-9S9.239 3 12 3M3.5 9h17m-17 6h17"
42+
/>
43+
</svg>
44+
<svg
45+
class="mt-px hidden size-2 fill-current opacity-60 sm:inline-block"
46+
xmlns="http://www.w3.org/2000/svg"
47+
viewBox="0 0 2048 2048"
48+
>
49+
<path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z" />
50+
</svg>
2351
</div>
24-
<div class="bg-base-200 mt-4 p-2 w-52 shadow-sm z-1 dropdown-content menu rounded-box" tabindex="0">
25-
<li v-for="lang in availableLocales" :key="lang">
26-
<button class="flex" @click="ChangeLocales(lang)">
27-
<span class="flex flex-1 justify-between">
28-
{{ languagesNameList.find((item) => item.code === lang)?.nativeName }}
29-
<!-- <span class="badge-ghost badge badge-sm" /> -->
30-
</span>
31-
</button>
32-
</li>
52+
<div
53+
tabindex="0"
54+
class="dropdown-content top-px mt-12 max-h-[calc(100vh-8.6rem)] w-56 overflow-y-auto border border-white/5 bg-base-200 text-base-content shadow-2xl outline-1 outline-black/5 rounded-box"
55+
>
56+
<ul class="w-full menu menu-sm">
57+
<li v-for="lang in sortedLocales" :key="lang">
58+
<button
59+
class="flex"
60+
:class="{ 'menu-active': locale === lang }"
61+
@click="ChangeLocales(lang)"
62+
>
63+
<span class="pe-4 font-bold font-mono opacity-40">
64+
{{ lang }}
65+
</span>
66+
<span class="font-[sans-serif]">
67+
{{ languagesNameList.find((item) => item.code === lang)?.nativeName }}
68+
</span>
69+
</button>
70+
</li>
71+
</ul>
3372
</div>
3473
</div>
3574
</template>
3675

37-
<style scoped>
38-
39-
</style>
76+
<style scoped>
77+
.menu-active {
78+
background-color: hsl(var(--p) / var(--tw-bg-opacity));
79+
--tw-bg-opacity: 0.1;
80+
}
81+
</style>

‎src/layouts/Navbar/components/ThemeChange/index.vue‎

Lines changed: 49 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -98,32 +98,51 @@ function handleKeyDown(event: KeyboardEvent, theme: CustomTheme) {
9898
<template>
9999
<div title="Change Theme" class="dropdown dropdown-end">
100100
<div tabindex="0" role="button" class="gap-1 btn btn-ghost btn-sm" aria-label="Change Theme">
101-
<UnoCSSIconButton icon="i-tabler-color-swatch" />
101+
<div class="grid grid-cols-2 shrink-0 gap-0.5 border border-base-content/10 rounded-md bg-base-100 p-1">
102+
<div class="size-1 rounded-full bg-base-content" />
103+
<div class="size-1 rounded-full bg-primary" />
104+
<div class="size-1 rounded-full bg-secondary" />
105+
<div class="size-1 rounded-full bg-accent" />
106+
</div>
102107
<span class="hidden md:inline">{{ t("Themes") }}</span>
103-
<UnoCSSIconButton icon="i-tabler-chevron-down" />
108+
<svg
109+
width="12px"
110+
height="12px"
111+
class="mt-px hidden h-2 w-2 fill-current opacity-60 sm:inline-block"
112+
xmlns="http://www.w3.org/2000/svg"
113+
viewBox="0 0 2048 2048"
114+
>
115+
<path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z" />
116+
</svg>
104117
</div>
105-
<div tabindex="0" class="bg-base-200 text-base-content mt-16 outline-1 outline-black/5 border border-white/5 h-[30.5rem] max-h-[calc(100vh-8.6rem)] shadow-2xl top-px overflow-y-auto dropdown-content rounded-box">
118+
<div
119+
tabindex="0"
120+
class="dropdown-content top-px mt-12 h-[30.5rem] max-h-[calc(100vh-8.6rem)] overflow-y-auto border border-white/5 bg-base-200 text-base-content shadow-2xl outline-1 outline-black/5 rounded-box"
121+
>
106122
<ul class="w-56 menu">
107123
<li class="text-xs menu-title">
108124
{{ t("Themes") }}
109125
</li>
110126
<li v-for="theme in themeList" :key="theme.id">
111127
<button
112-
class="px-2 gap-3"
128+
class="gap-3 px-2"
113129
:class="mode === theme.id ? '[&_svg]:visible' : ''"
114130
@click="changeTheme($event, theme.id)"
115131
@keydown="handleKeyDown($event, theme.id)"
116132
>
117-
<div :data-theme="theme.id" class="bg-base-100 p-1 rounded-md shrink-0 gap-0.5 grid grid-cols-2 shadow-sm">
118-
<div class="bg-base-content rounded-full size-1" />
119-
<div class="bg-primary rounded-full size-1" />
120-
<div class="bg-secondary rounded-full size-1" />
121-
<div class="bg-accent rounded-full size-1" />
133+
<div
134+
:data-theme="theme.id"
135+
class="grid grid-cols-2 shrink-0 gap-0.5 rounded-md bg-base-100 p-1 shadow-sm"
136+
>
137+
<div class="size-1 rounded-full bg-base-content" />
138+
<div class="size-1 rounded-full bg-primary" />
139+
<div class="size-1 rounded-full bg-secondary" />
140+
<div class="size-1 rounded-full bg-accent" />
122141
</div>
123142
<div class="w-32 truncate">
124143
{{ theme.id }}
125144
</div>
126-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="shrink-0 h-3 w-3 invisible">
145+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="invisible h-3 w-3 shrink-0">
127146
<path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" />
128147
</svg>
129148
</button>
@@ -135,6 +154,26 @@ function handleKeyDown(event: KeyboardEvent, theme: CustomTheme) {
135154
</template>
136155

137156
<style scoped>
157+
.scrollbar::-webkit-scrollbar {
158+
width: 20px;
159+
height: 20px;
160+
}
161+
162+
.scrollbar::-webkit-scrollbar-track {
163+
border-radius: 100vh;
164+
background: #f7f4ed;
165+
}
166+
167+
.scrollbar::-webkit-scrollbar-thumb {
168+
background: #e0cbcb;
169+
border-radius: 100vh;
170+
border: 3px solid #f6f7ed;
171+
}
172+
173+
.scrollbar::-webkit-scrollbar-thumb:hover {
174+
background: #c0a0b9;
175+
}
176+
138177
::view-transition-old(root),
139178
::view-transition-new(root) {
140179
animation: none;

‎src/pages/home/components/Hero.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ function testStore() {
99
</script>
1010

1111
<template>
12-
<div class="bg-base-200 text-primary-content mt-[-4rem] min-h-screen hero">
12+
<div class="bg-base-100/90 text-base-content mt-[-4rem] min-h-screen hero">
13+
<div
14+
class="place-items-center"
15+
/>
1316
<div class="text-center hero-content">
1417
<div class="max-w-md">
1518
<h1 class="text-5xl font-bold mb-5">

‎src/pages/home/components/StoreTest.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import appStore from "~/store";
66
<div class="bg-base-100 py-20 flex flex-col gap-20 items-center">
77
<div class="mockup-phone">
88
<div class="mockup-phone-camera" />
9-
<div class="mockup-phone-display">
9+
<div class="mockup-phone-display text-white">
1010
<div class="text-center grid h-full place-content-center">
1111
<p class="text-xl font-medium tracking-wide uppercase">
1212
Counter:

‎unocss.config.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { presetDaisy } from "@ameinhardt/unocss-preset-daisy";
2+
import theme from "daisyui/functions/variables";
23
import { presetAttributify, presetIcons, presetWind4, transformerDirectives, transformerVariantGroup } from "unocss";
34
import presetChinese from "unocss-preset-chinese";
45
import presetEase from "unocss-preset-ease";
@@ -15,6 +16,7 @@ export default defineConfig({
1516
}),
1617
presetDaisy({
1718
base: true,
19+
utils: true,
1820
themes: [
1921
"light",
2022
"dark",
@@ -54,6 +56,9 @@ export default defineConfig({
5456
],
5557
}),
5658
],
59+
theme: {
60+
...theme,
61+
},
5762
transformers: [
5863
transformerDirectives(),
5964
transformerVariantGroup(),

0 commit comments

Comments
 (0)