george/bibdle
1
0
Fork 0
mirror of https://github.com/pupperpowell/bibdle.git synced 2026-08-22 22:32:28 -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
src/lib/components/WinScreen.svelte
+31 -6
View File
@@ -122,7 +122,7 @@
<div class="flex flex-col gap-6">
<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">
<p class="text-2xl sm:text-3xl md:text-4xl leading-tight">
@@ -168,7 +168,7 @@
<!-- Statistics Display -->
{#if statsData}
<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
class="grid grid-cols-3 gap-4 gap-x-8 text-center"
@@ -177,7 +177,7 @@
<!-- Solve Rank Column -->
<div class="flex flex-col">
<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}
</div>
@@ -190,7 +190,7 @@
<!-- Guess Rank Column -->
<div class="flex flex-col">
<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)}
</div>
@@ -212,7 +212,7 @@
<!-- Average Column -->
<div class="flex flex-col">
<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}
</div>
@@ -226,7 +226,7 @@
</Container>
{:else if !statsSubmitted}
<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>
</Container>
@@ -352,6 +352,13 @@
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 {
content: "";
position: absolute;
@@ -372,6 +379,12 @@
gap: 0.6rem;
}
@media (prefers-color-scheme: dark) {
.chat-window {
--bg: oklch(22% 0.025 298.626);
}
}
/* ── Bubble wrappers ── */
.bubble-wrapper {
display: flex;
@@ -525,6 +538,12 @@
margin-top: -6px;
}
@media (prefers-color-scheme: dark) {
.copy-hint {
color: #aaa;
}
}
/* ── Snippet toggle row ── */
.snippet-toggle-row {
display: flex;
@@ -541,6 +560,12 @@
user-select: none;
}
@media (prefers-color-scheme: dark) {
.snippet-label {
color: #999;
}
}
.snippet-toggle {
position: relative;
width: 36px;