george/bibdle
1
0
Fork 0
mirror of https://github.com/pupperpowell/bibdle.git synced 2026-04-05 17:33:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

added device-dependent dark mode

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/ChapterGuess.svelte
View File

@@ -167,7 +167,7 @@
</script> </script>
<Container <Container
class="w-full p-3 sm:p-4 bg-linear-to-br from-yellow-100/80 to-amber-200/80 text-gray-800 shadow-md" class="w-full p-3 sm:p-4 bg-linear-to-br from-yellow-100/80 to-amber-200/80 dark:from-amber-900/40 dark:to-yellow-900/30 text-gray-800 dark:text-gray-100 shadow-md"
> >
<div class="text-center"> <div class="text-center">
<p class="font-bold mb-3 text-lg sm:text-xl"> <p class="font-bold mb-3 text-lg sm:text-xl">
@@ -193,8 +193,8 @@
? isCorrect ? isCorrect
? "bg-green-500 text-white border-green-600 shadow-lg" ? "bg-green-500 text-white border-green-600 shadow-lg"
: "bg-red-400 text-white border-red-500" : "bg-red-400 text-white border-red-500"
: "bg-white/30 text-gray-400 border-gray-300 opacity-40" : "bg-white/30 dark:bg-white/10 text-gray-400 border-gray-300 dark:border-gray-600 opacity-40"
: "bg-white/80 hover:bg-white text-gray-800 border-gray-300 hover:border-amber-400 hover:shadow-md cursor-pointer" : "bg-white/80 dark:bg-white/10 hover:bg-white dark:hover:bg-white/20 text-gray-800 dark:text-gray-100 border-gray-300 dark:border-gray-600 hover:border-amber-400 dark:hover:border-amber-500 hover:shadow-md cursor-pointer"
} }
`} `}
> >

2
src/lib/components/Container.svelte
View File

@@ -10,7 +10,7 @@
</script> </script>
<div <div
class="inline-flex flex-col items-center bg-white/10 backdrop-blur-sm rounded-2xl border border-white/20 shadow-sm {className}" class="inline-flex flex-col items-center bg-white/10 dark:bg-white/5 backdrop-blur-sm rounded-2xl border border-white/20 dark:border-white/10 shadow-sm {className}"
> >
{@render children()} {@render children()}
</div> </div>

10
src/lib/components/CountdownTimer.svelte
View File

@@ -52,28 +52,28 @@
<div class="w-full flex flex-col flex-1"> <div class="w-full flex flex-col flex-1">
<div <div
class="flex flex-col items-center justify-center bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm w-full flex-1" class="flex flex-col items-center justify-center bg-white/50 dark:bg-black/30 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 dark:border-white/10 shadow-sm w-full flex-1"
> >
{#if newVerseReady} {#if newVerseReady}
<p <p
class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mb-2" class="text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 font-bold mb-2"
> >
Next Verse In Next Verse In
</p> </p>
<p class="text-4xl font-triodion font-black text-gray-800">Now</p> <p class="text-4xl font-triodion font-black text-gray-800">Now</p>
<p <p
class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mt-2" class="text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 font-bold mt-2"
> >
(refresh page to see the new verse) (refresh page to see the new verse)
</p> </p>
{:else} {:else}
<p <p
class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mb-2" class="text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 font-bold mb-2"
> >
Next Verse In Next Verse In
</p> </p>
<p <p
class="text-4xl font-triodion font-black text-gray-800 tabular-nums whitespace-nowrap" class="text-4xl font-triodion font-black text-gray-800 dark:text-gray-100 tabular-nums whitespace-nowrap"
> >
{timeUntilNext} {timeUntilNext}
</p> </p>

12
src/lib/components/Credits.svelte
View File

@@ -6,9 +6,11 @@
<div class="text-center" in:fade={{ delay: 1500, duration: 1000 }}> <div class="text-center" in:fade={{ delay: 1500, duration: 1000 }}>
<div <div
class="flex flex-col items-center gap-2 bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm" class="flex flex-col items-center gap-2 bg-white/50 dark:bg-black/30 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 dark:border-white/10 shadow-sm"
> >
<p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold"> <p
class="text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-300 font-bold"
>
A project by George Powell & Silent Summit Co. A project by George Powell & Silent Summit Co.
</p> </p>
<!-- <p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold"> <!-- <p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold">
@@ -39,7 +41,7 @@
<img src={BlueskyLogo} alt="Bluesky" class="w-8 h-8" /> <img src={BlueskyLogo} alt="Bluesky" class="w-8 h-8" />
</a> </a>
<div class="w-0.5 h-8 bg-gray-400"></div> <div class="w-0.5 h-8 bg-gray-400 dark:bg-gray-600"></div>
<a <a
href="https://x.com/pupperpowell" href="https://x.com/pupperpowell"
@@ -53,7 +55,7 @@
<img src={TwitterLogo} alt="Twitter" class="w-8 h-8" /> <img src={TwitterLogo} alt="Twitter" class="w-8 h-8" />
</a> </a>
<div class="w-0.5 h-8 bg-gray-400"></div> <div class="w-0.5 h-8 bg-gray-400 dark:bg-gray-600"></div>
<a <a
href="mailto:george+bibdle@silentsummit.co" href="mailto:george+bibdle@silentsummit.co"
@@ -63,7 +65,7 @@
onclick={() => (window as any).rybbit?.event("Email clicked")} onclick={() => (window as any).rybbit?.event("Email clicked")}
> >
<svg <svg
class="w-8 h-8 text-gray-700" class="w-8 h-8 text-gray-700 dark:text-gray-300"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"

14
src/lib/components/GuessesTable.svelte
View File

@@ -66,10 +66,10 @@
{#if !hasGuesses} {#if !hasGuesses}
<Container class="p-6 text-center"> <Container class="p-6 text-center">
<h2 class="font-triodion text-xl italic mb-3 text-gray-800"> <h2 class="font-triodion text-xl italic mb-3 text-gray-800 dark:text-gray-100">
Instructions Instructions
</h2> </h2>
<p class="text-gray-700 leading-relaxed italic"> <p class="text-gray-700 dark:text-gray-300 leading-relaxed italic">
Guess what book of the bible you think the verse is from. You will Guess what book of the bible you think the verse is from. You will
get clues to help you after each guess. get clues to help you after each guess.
</p> </p>
@@ -78,25 +78,25 @@
<div class="space-y-3"> <div class="space-y-3">
<!-- Column Headers --> <!-- Column Headers -->
<div <div
class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400" class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400 dark:border-gray-600"
> >
<div <div
class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700" class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
> >
Testament Testament
</div> </div>
<div <div
class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700" class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
> >
Section Section
</div> </div>
<div <div
class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700" class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
> >
First Letter First Letter
</div> </div>
<div <div
class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700" class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
> >
Book Book
</div> </div>

52
src/lib/components/SearchInput.svelte
View File

@@ -127,21 +127,17 @@
</script> </script>
{#if showBanner} {#if showBanner}
<div <p
class="mb-3 flex items-center gap-2 px-4 py-2 rounded-full text-xs font-medium border w-fit transition-all duration-300 class="mb-3 text-xs font-medium text-gray-500 dark:text-gray-400"
{bannerIsIndigo
? 'bg-indigo-50 border-indigo-200 text-indigo-700'
: 'bg-amber-50 border-amber-200 text-amber-700'}"
role="status" role="status"
aria-live="polite" aria-live="polite"
> >
<span aria-hidden="true" class="text-[10px] leading-none">✦</span>
{#if bannerIsIndigo} {#if bannerIsIndigo}
Testament &amp; section groups now visible Testament &amp; section groups now visible
{:else} {:else}
Old &amp; New Testament groups now visible Old &amp; New Testament groups now visible
{/if} {/if}
</div> </p>
{/if} {/if}
<div class="relative"> <div class="relative">
@@ -164,13 +160,13 @@
<input <input
bind:value={searchQuery} bind:value={searchQuery}
placeholder="Type to guess a book (e.g. 'Genesis', 'John')..." placeholder="Type to guess a book (e.g. 'Genesis', 'John')..."
class="w-full pl-12 sm:pl-16 p-4 sm:p-6 border-2 border-gray-500 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-600 focus:ring-4 focus:ring-blue-200 transition-all bg-white" class="w-full pl-12 sm:pl-16 p-4 sm:p-6 border-2 border-gray-500 dark:border-gray-600 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-600 dark:focus:border-blue-400 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900/50 transition-all bg-white dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
onkeydown={handleKeydown} onkeydown={handleKeydown}
autocomplete="off" autocomplete="off"
/> />
{#if searchQuery} {#if searchQuery}
<button <button
class="absolute right-4 sm:right-6 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors" class="absolute right-4 sm:right-6 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
onclick={() => (searchQuery = "")} onclick={() => (searchQuery = "")}
aria-label="Clear search" aria-label="Clear search"
> >
@@ -195,7 +191,7 @@
{#if searchQuery && filteredBooks.length > 0} {#if searchQuery && filteredBooks.length > 0}
<ul <ul
class="mt-4 max-h-60 sm:max-h-80 overflow-y-auto bg-white border border-gray-300 rounded-2xl shadow-xl" class="mt-4 max-h-60 sm:max-h-80 overflow-y-auto bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-2xl shadow-xl"
role="listbox" role="listbox"
> >
{#if displayMode === "simple"} {#if displayMode === "simple"}
@@ -210,8 +206,8 @@
tabindex={guessedIds.has(book.id) ? -1 : 0} tabindex={guessedIds.has(book.id) ? -1 : 0}
> >
<span <span
class="font-semibold {guessedIds.has(book.id) class="font-semibold dark:text-gray-100 {guessedIds.has(book.id)
? 'line-through text-gray-400' ? 'line-through text-gray-400 dark:text-gray-500'
: ''}" : ''}"
> >
{book.name} {book.name}
@@ -223,29 +219,29 @@
{#each testamentGroups as group (group.testament)} {#each testamentGroups as group (group.testament)}
<li role="presentation"> <li role="presentation">
<div <div
class="px-5 py-2 flex items-center gap-3 bg-gray-50 border-b border-gray-100" class="px-5 py-2 flex items-center gap-3 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-100 dark:border-gray-700"
> >
<span <span
class="text-xs font-semibold uppercase tracking-wider text-gray-400" class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-400"
> >
{group.label} {group.label}
</span> </span>
<div class="flex-1 h-px bg-gray-200"></div> <div class="flex-1 h-px bg-gray-200 dark:bg-gray-600"></div>
</div> </div>
<ul> <ul>
{#each group.books as book (book.id)} {#each group.books as book (book.id)}
<li role="option" aria-selected={guessedIds.has(book.id)}> <li role="option" aria-selected={guessedIds.has(book.id)}>
<button <button
class="w-full px-5 py-4 text-left border-b border-gray-100 last:border-b-0 flex items-center transition-all class="w-full px-5 py-4 text-left border-b border-gray-100 dark:border-gray-700 last:border-b-0 flex items-center transition-all dark:text-gray-200
{guessedIds.has(book.id) {guessedIds.has(book.id)
? 'opacity-50 cursor-not-allowed pointer-events-none' ? 'opacity-50 cursor-not-allowed pointer-events-none'
: 'hover:bg-blue-50 hover:text-blue-700'}" : 'hover:bg-blue-50 dark:hover:bg-blue-900/40 hover:text-blue-700 dark:hover:text-blue-300'}"
onclick={() => submitGuess(book.id)} onclick={() => submitGuess(book.id)}
tabindex={guessedIds.has(book.id) ? -1 : 0} tabindex={guessedIds.has(book.id) ? -1 : 0}
> >
<span <span
class="font-semibold {guessedIds.has(book.id) class="font-semibold {guessedIds.has(book.id)
? 'line-through text-gray-400' ? 'line-through text-gray-400 dark:text-gray-500'
: ''}" : ''}"
> >
{book.name} {book.name}
@@ -261,40 +257,40 @@
<li role="presentation"> <li role="presentation">
{#if group.showTestamentHeader} {#if group.showTestamentHeader}
<div <div
class="px-5 pt-3 pb-1 flex items-center gap-3 bg-gray-50 border-b border-gray-100" class="px-5 pt-3 pb-1 flex items-center gap-3 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-100 dark:border-gray-700"
> >
<span <span
class="text-xs font-bold uppercase tracking-wider text-gray-500" class="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400"
> >
{group.testamentLabel} {group.testamentLabel}
</span> </span>
<div class="flex-1 h-px bg-gray-200"></div> <div class="flex-1 h-px bg-gray-200 dark:bg-gray-600"></div>
</div> </div>
{/if} {/if}
<div <div
class="px-7 py-1.5 flex items-center gap-3 bg-gray-50/50 border-b border-gray-100" class="px-7 py-1.5 flex items-center gap-3 bg-gray-50/50 dark:bg-gray-700/30 border-b border-gray-100 dark:border-gray-700"
> >
<span <span
class="text-[11px] font-medium uppercase tracking-wider text-gray-400" class="text-[11px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500"
> >
{group.section} {group.section}
</span> </span>
<div class="flex-1 h-px bg-gray-100"></div> <div class="flex-1 h-px bg-gray-100 dark:bg-gray-600"></div>
</div> </div>
<ul> <ul>
{#each group.books as book (book.id)} {#each group.books as book (book.id)}
<li role="option" aria-selected={guessedIds.has(book.id)}> <li role="option" aria-selected={guessedIds.has(book.id)}>
<button <button
class="w-full px-5 py-4 text-left border-b border-gray-100 last:border-b-0 flex items-center transition-all class="w-full px-5 py-4 text-left border-b border-gray-100 dark:border-gray-700 last:border-b-0 flex items-center transition-all dark:text-gray-200
{guessedIds.has(book.id) {guessedIds.has(book.id)
? 'opacity-50 cursor-not-allowed pointer-events-none' ? 'opacity-50 cursor-not-allowed pointer-events-none'
: 'hover:bg-blue-50 hover:text-blue-700'}" : 'hover:bg-blue-50 dark:hover:bg-blue-900/40 hover:text-blue-700 dark:hover:text-blue-300'}"
onclick={() => submitGuess(book.id)} onclick={() => submitGuess(book.id)}
tabindex={guessedIds.has(book.id) ? -1 : 0} tabindex={guessedIds.has(book.id) ? -1 : 0}
> >
<span <span
class="font-semibold {guessedIds.has(book.id) class="font-semibold {guessedIds.has(book.id)
? 'line-through text-gray-400' ? 'line-through text-gray-400 dark:text-gray-500'
: ''}" : ''}"
> >
{book.name} {book.name}
@@ -308,6 +304,6 @@
{/if} {/if}
</ul> </ul>
{:else if searchQuery} {:else if searchQuery}
<p class="mt-4 text-center text-gray-500 p-8">No books found</p> <p class="mt-4 text-center text-gray-500 dark:text-gray-400 p-8">No books found</p>
{/if} {/if}
</div> </div>

6
src/lib/components/StreakCounter.svelte
View File

@@ -9,7 +9,7 @@
</script> </script>
<div <div
class="flex flex-col items-center justify-center bg-white/50 backdrop-blur-sm px-4 py-4 rounded-2xl border border-white/50 shadow-sm flex-1 text-center" class="flex flex-col items-center justify-center bg-white/50 dark:bg-black/30 backdrop-blur-sm px-4 py-4 rounded-2xl border border-white/50 dark:border-white/10 shadow-sm flex-1 text-center"
> >
<p <p
class="text-5xl font-triodion font-black text-orange-500 leading-none tabular-nums" class="text-5xl font-triodion font-black text-orange-500 leading-none tabular-nums"
@@ -17,13 +17,13 @@
{streak} {streak}
</p> </p>
<p <p
class="text-xs uppercase justify-center tracking-widest text-gray-500 font-triodion font-bold py-2 leading-tight" class="text-xs uppercase justify-center tracking-widest text-gray-500 dark:text-gray-200 font-triodion font-bold py-2 leading-tight"
> >
day{streak === 1 ? "" : "s"} in a row day{streak === 1 ? "" : "s"} in a row
</p> </p>
{#if streakPercentile !== null && streakPercentile <= 50} {#if streakPercentile !== null && streakPercentile <= 50}
<p <p
class="text-xs text-black w-full tracking-widest uppercase font-semibold border-t border-t-stone-400 pt-2" class="text-xs text-black dark:text-gray-200 w-full tracking-widest uppercase font-semibold border-t border-t-stone-400 dark:border-t-stone-600 pt-2"
> >
Top {streakPercentile}% Top {streakPercentile}%
</p> </p>

8
src/lib/components/VerseDisplay.svelte
View File

@@ -63,9 +63,11 @@
} }
</script> </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 <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} {displayVerseText}
</blockquote> </blockquote>
@@ -76,7 +78,7 @@
{#if showReference} {#if showReference}
<p <p
transition:fade={{ duration: 400 }} 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} {displayReference}
</p> </p>

37
src/lib/components/WinScreen.svelte
View File

@@ -122,7 +122,7 @@
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
<Container <Container
class="w-full px-4 sm:px-6 py-6 sm:py-8 bg-linear-to-r from-green-400/10 to-green-600/30 text-gray-800 shadow-2xl text-center fade-in" class="w-full px-4 sm:px-6 py-6 sm:py-8 bg-linear-to-r from-green-400/10 to-green-600/30 text-gray-800 dark:text-gray-100 shadow-2xl text-center fade-in"
> >
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<p class="text-2xl sm:text-3xl md:text-4xl leading-tight"> <p class="text-2xl sm:text-3xl md:text-4xl leading-tight">
@@ -168,7 +168,7 @@
<!-- Statistics Display --> <!-- Statistics Display -->
{#if statsData} {#if statsData}
<Container <Container
class="w-full p-4 bg-white/50 backdrop-blur-sm text-gray-800 shadow-lg text-center" class="w-full p-4 bg-white/50 dark:bg-black/30 backdrop-blur-sm text-gray-800 dark:text-gray-100 shadow-lg text-center"
> >
<div <div
class="grid grid-cols-3 gap-4 gap-x-8 text-center" class="grid grid-cols-3 gap-4 gap-x-8 text-center"
@@ -177,7 +177,7 @@
<!-- Solve Rank Column --> <!-- Solve Rank Column -->
<div class="flex flex-col"> <div class="flex flex-col">
<div <div
class="text-3xl sm:text-4xl font-black border-b border-gray-300 pb-2" class="text-3xl sm:text-4xl font-black border-b border-gray-300 dark:border-gray-600 pb-2"
> >
#{statsData.solveRank} #{statsData.solveRank}
</div> </div>
@@ -190,7 +190,7 @@
<!-- Guess Rank Column --> <!-- Guess Rank Column -->
<div class="flex flex-col"> <div class="flex flex-col">
<div <div
class="text-3xl sm:text-4xl font-black border-b border-gray-300 pb-2" class="text-3xl sm:text-4xl font-black border-b border-gray-300 dark:border-gray-600 pb-2"
> >
{toOrdinal(statsData.guessRank)} {toOrdinal(statsData.guessRank)}
</div> </div>
@@ -212,7 +212,7 @@
<!-- Average Column --> <!-- Average Column -->
<div class="flex flex-col"> <div class="flex flex-col">
<div <div
class="text-3xl sm:text-4xl font-black border-b border-gray-300 pb-2" class="text-3xl sm:text-4xl font-black border-b border-gray-300 dark:border-gray-600 pb-2"
> >
{statsData.averageGuesses} {statsData.averageGuesses}
</div> </div>
@@ -226,7 +226,7 @@
</Container> </Container>
{:else if !statsSubmitted} {:else if !statsSubmitted}
<Container <Container
class="w-full p-6 bg-white/50 backdrop-blur-sm text-gray-800 shadow-lg text-center" class="w-full p-6 bg-white/50 dark:bg-black/30 backdrop-blur-sm text-gray-800 dark:text-gray-100 shadow-lg text-center"
> >
<div class="text-sm opacity-80">Submitting stats...</div> <div class="text-sm opacity-80">Submitting stats...</div>
</Container> </Container>
@@ -352,6 +352,13 @@
overflow: hidden; overflow: hidden;
} }
@media (prefers-color-scheme: dark) {
.share-card {
background: oklch(22% 0.025 298.626);
border-color: rgba(255, 255, 255, 0.1);
}
}
.share-card::before { .share-card::before {
content: ""; content: "";
position: absolute; position: absolute;
@@ -372,6 +379,12 @@
gap: 0.6rem; gap: 0.6rem;
} }
@media (prefers-color-scheme: dark) {
.chat-window {
--bg: oklch(22% 0.025 298.626);
}
}
/* ── Bubble wrappers ── */ /* ── Bubble wrappers ── */
.bubble-wrapper { .bubble-wrapper {
display: flex; display: flex;
@@ -525,6 +538,12 @@
margin-top: -6px; margin-top: -6px;
} }
@media (prefers-color-scheme: dark) {
.copy-hint {
color: #aaa;
}
}
/* ── Snippet toggle row ── */ /* ── Snippet toggle row ── */
.snippet-toggle-row { .snippet-toggle-row {
display: flex; display: flex;
@@ -541,6 +560,12 @@
user-select: none; user-select: none;
} }
@media (prefers-color-scheme: dark) {
.snippet-label {
color: #999;
}
}
.snippet-toggle { .snippet-toggle {
position: relative; position: relative;
width: 36px; width: 36px;

8
src/routes/+page.svelte
View File

@@ -283,10 +283,10 @@
<title>A daily bible game{isDev ? " (dev)" : ""}</title> <title>A daily bible game{isDev ? " (dev)" : ""}</title>
</svelte:head> </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"> <div class="w-full max-w-3xl mx-auto px-4">
<h1 <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 /> <TitleAnimation />
<div class="font-normal"></div> <div class="font-normal"></div>
@@ -375,7 +375,7 @@
</div> </div>
<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><strong>Debug Info:</strong></div>
<div> <div>
@@ -413,7 +413,7 @@
{#if user && session} {#if user && session}
<div <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] Signed in as {[user.firstName, user.lastName]
.filter(Boolean) .filter(Boolean)

12
src/routes/layout.css
View File

@@ -10,6 +10,12 @@ html, body {
background: oklch(89.126% 0.06134 298.626); background: oklch(89.126% 0.06134 298.626);
} }
@media (prefers-color-scheme: dark) {
html, body {
background: oklch(18% 0.03 298.626);
}
}
.big-text { .big-text {
font-size: 0.75rem; font-size: 0.75rem;
text-transform: uppercase; text-transform: uppercase;
@@ -18,6 +24,12 @@ html, body {
font-weight: 700; font-weight: 700;
} }
@media (prefers-color-scheme: dark) {
.big-text {
color: rgb(156 163 175);
}
}
/* Page load animations */ /* Page load animations */
@keyframes fadeInUp { @keyframes fadeInUp {
from { from {