feat: add light mode support across all templates

This commit is contained in:
2026-05-07 12:21:03 +02:00
parent 0879dde851
commit 7412c9ed68
12 changed files with 200 additions and 196 deletions

View File

@@ -7,8 +7,8 @@
<section class="w-full">
<div class="mb-4 flex items-end justify-between">
<h2 class="text-lg font-semibold text-neutral-200">Currently Airing</h2>
<a href="/browse?status=airing&order_by=popularity&sort=desc" class="group flex items-center gap-1 text-sm text-neutral-400 transition-colors hover:text-white">
<h2 class="text-lg font-semibold text-foreground">Currently Airing</h2>
<a href="/browse?status=airing&order_by=popularity&sort=desc" class="group flex items-center gap-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
See more
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6"/></svg>
</a>
@@ -20,8 +20,8 @@
<section class="w-full">
<div class="mb-4 flex items-end justify-between">
<h2 class="text-lg font-semibold text-neutral-200">Most Popular</h2>
<a href="/browse?order_by=popularity&sort=desc" class="group flex items-center gap-1 text-sm text-neutral-400 transition-colors hover:text-white">
<h2 class="text-lg font-semibold text-foreground">Most Popular</h2>
<a href="/browse?order_by=popularity&sort=desc" class="group flex items-center gap-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
See more
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6"/></svg>
</a>
@@ -34,7 +34,10 @@
<style>
.skeleton {
background: linear-gradient(90deg, #1f1f1f 25%, #2a2a2a 50%, #1f1f1f 75%);
background: light-dark(
linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%),
linear-gradient(90deg, #1f1f1f 25%, #2a2a2a 50%, #1f1f1f 75%)
);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
}