added device-dependent dark mode

This commit is contained in:
George Powell
2026-02-26 07:27:30 -05:00
parent ad1774e6b0
commit 592fa917cd
11 changed files with 102 additions and 65 deletions

View File

@@ -283,10 +283,10 @@
<title>A daily bible game{isDev ? " (dev)" : ""}</title>
</svelte:head>
<div class="min-h-dvh md:bg-linear-to-br md:from-blue-50 md:to-indigo-200 py-8">
<div class="min-h-dvh md:bg-linear-to-br md:from-blue-50 md:to-indigo-200 dark:md:from-gray-900 dark:md:to-slate-950 py-8">
<div class="w-full max-w-3xl mx-auto px-4">
<h1
class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-4 animate-fade-in-up"
class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 dark:text-gray-300 drop-shadow-2xl tracking-widest p-4 animate-fade-in-up"
>
<TitleAnimation />
<div class="font-normal"></div>
@@ -375,7 +375,7 @@
</div>
<div
class="text-xs text-gray-600 bg-gray-100 px-3 py-2 rounded border"
class="text-xs text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 px-3 py-2 rounded border dark:border-gray-700"
>
<div><strong>Debug Info:</strong></div>
<div>
@@ -413,7 +413,7 @@
{#if user && session}
<div
class="mt-6 pt-4 border-t border-gray-200 text-center text-xs text-gray-400"
class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700 text-center text-xs text-gray-400 dark:text-gray-500"
>
Signed in as {[user.firstName, user.lastName]
.filter(Boolean)