george/bibdle
1
0
Fork 0
mirror of https://github.com/pupperpowell/bibdle.git synced 2026-04-06 01:43:32 -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

8
src/routes/+page.svelte
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)

12
src/routes/layout.css
View File

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