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

@@ -63,9 +63,11 @@
}
</script>
<Container class="w-full p-8 sm:p-12 bg-white/70 overflow-hidden">
<Container
class="w-full p-8 sm:p-12 bg-white/70 dark:bg-black/30 overflow-hidden"
>
<blockquote
class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 text-center"
class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 dark:text-gray-200 text-center"
>
{displayVerseText}
</blockquote>
@@ -76,7 +78,7 @@
{#if showReference}
<p
transition:fade={{ duration: 400 }}
class="text-center text-lg! big-text text-green-600! font-bold mt-8 bg-white/70 rounded-xl px-4 py-2"
class="text-center text-lg! big-text text-green-600! dark:text-green-400! font-bold mt-8 bg-white/70 dark:bg-black/50 rounded-xl px-4 py-2"
>
{displayReference}
</p>