Enable dark mode

This commit is contained in:
dtonon 2026-05-27 22:13:48 +01:00
parent b3e6533748
commit dcd3857c80
26 changed files with 410 additions and 220 deletions

View file

@ -27,7 +27,7 @@
<img src={a.picture} alt="" class={cls} />
{:else}
<span
class="{cls} flex items-center justify-center rounded-full bg-neutral-200 text-[10px] font-semibold text-neutral-500"
class="{cls} flex items-center justify-center rounded-full bg-neutral-200 dark:bg-neutral-700 text-[10px] font-semibold text-neutral-500 dark:text-neutral-400"
>
{a.name[0].toUpperCase()}
</span>
@ -36,12 +36,12 @@
<a
href="/thread/{thread.id}"
class="flex items-center gap-3 border-b border-neutral-100 py-4 hover:bg-neutral-50 sm:gap-6"
class="flex items-center gap-3 border-b border-neutral-100 dark:border-neutral-800 py-4 hover:bg-neutral-50 dark:hover:bg-neutral-800 sm:gap-6"
>
<!-- Col 1: title + byline -->
<div class="min-w-0 flex-1">
<div class="mb-1.5 text-lg leading-5 text-neutral-900">{thread.title}</div>
<div class="flex items-center gap-1.5 text-sm text-neutral-500">
<div class="mb-1.5 text-lg leading-5 text-neutral-900 dark:text-neutral-100">{thread.title}</div>
<div class="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400">
<span>by</span>
{@render avatar(thread.author, "h-5 w-5 rounded-full object-cover")}
{#if thread.repliers.length > 0}
@ -73,8 +73,8 @@
<!-- Col 3: replies | activity -->
<div class="flex shrink-0 items-center gap-4 sm:gap-6">
<div class="flex flex-col items-center gap-0.5">
<span class="text-neutral-800">{thread.replyCount}</span>
<span class="text-sm text-neutral-400">replies</span>
<span class="text-neutral-800 dark:text-neutral-200">{thread.replyCount}</span>
<span class="text-sm text-neutral-400 dark:text-neutral-500">replies</span>
</div>
<div class="flex flex-col items-center gap-0.5">
@ -83,9 +83,9 @@
thread.lastActiveAuthor,
"h-5 w-5 rounded-full object-cover",
)}
<span class="text-neutral-800">{thread.lastActivity}</span>
<span class="text-neutral-800 dark:text-neutral-200">{thread.lastActivity}</span>
</div>
<span class="text-sm text-neutral-400">activity</span>
<span class="text-sm text-neutral-400 dark:text-neutral-500">activity</span>
</div>
</div>
</a>