reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: dark mode - light mode

Browse Source
This commit is contained in:
Ren Amamiya
2023-10-07 09:06:33 +07:00
parent c71bfb3f6d
commit cb91373d33
22 changed files with 147 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/shared/navigation.tsx
View File

@@ -20,28 +20,23 @@ export function Navigation() {
const navigate = useNavigate();
return (
<div className="relative flex h-full w-[232px] flex-col border-r border-white/5">
<div className="relative flex h-full w-[232px] flex-col border-r border-zinc-200 dark:border-zinc-800">
<div
data-tauri-drag-region
className="inline-flex h-16 w-full items-center justify-between px-3"
>
<div
className={twMerge(
'inline-flex items-center gap-4',
db.platform === 'darwin' ? 'pl-20' : 'pl-2'
)}
>
<div className="inline-flex items-center gap-4 pl-2">
<button
type="button"
onClick={() => navigate(-1)}
className="inline-flex h-9 items-center justify-center text-white/50 hover:text-white"
className="inline-flex h-9 items-center justify-center text-zinc-400 hover:text-zinc-500 dark:text-zinc-500 dark:hover:text-zinc-100"
>
<ArrowLeftIcon className="h-5 w-5" />
</button>
<button
type="button"
onClick={() => navigate(1)}
className="inline-flex h-9 items-center justify-center text-white/50 hover:text-white"
className="inline-flex h-9 items-center justify-center text-zinc-400 hover:text-zinc-500 dark:text-zinc-500 dark:hover:text-zinc-100"
>
<ArrowRightIcon className="h-5 w-5" />
</button>
@@ -60,8 +55,8 @@ export function Navigation() {
twMerge(
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
isActive
? 'border-fuchsia-500 bg-white/5 text-white'
: 'border-transparent text-white/70'
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
: 'border-transparent text-zinc-500 dark:text-zinc-500'
)
}
>
@@ -77,8 +72,8 @@ export function Navigation() {
twMerge(
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
isActive
? 'border-fuchsia-500 bg-white/5 text-white'
: 'border-transparent text-white/70'
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
: 'border-transparent text-zinc-500 dark:text-zinc-500'
)
}
>
@@ -94,8 +89,8 @@ export function Navigation() {
twMerge(
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
isActive
? 'border-fuchsia-500 bg-white/5 text-white'
: 'border-transparent text-white/70'
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
: 'border-transparent text-zinc-500 dark:text-zinc-500'
)
}
>
@@ -111,8 +106,8 @@ export function Navigation() {
twMerge(
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
isActive
? 'border-fuchsia-500 bg-white/5 text-white'
: 'border-transparent text-white/70'
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
: 'border-transparent text-zinc-500 dark:text-zinc-500'
)
}
>
@@ -128,8 +123,8 @@ export function Navigation() {
twMerge(
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
isActive
? 'border-fuchsia-500 bg-white/5 text-white'
: 'border-transparent text-white/70'
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
: 'border-transparent text-zinc-500 dark:text-zinc-500'
)
}
>