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

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

@@ -9,7 +9,7 @@
</script>
<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
class="text-5xl font-triodion font-black text-orange-500 leading-none tabular-nums"
@@ -17,13 +17,13 @@
{streak}
</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
</p>
{#if streakPercentile !== null && streakPercentile <= 50}
<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}%
</p>