feat: add dark background option

khui0 · Jul 16, 2024 · 88316e4 · 88316e4
1 parent e52671e
commit 88316e4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/src/lib/components/GameFeed.svelte b/src/lib/components/GameFeed.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { settings } from "$lib/settings";
+
   interface Country {
     code: string;
     name: string;
@@ -32,6 +34,7 @@
           src={guess.diff}
           alt="{guess.name} diff"
           class="bg-base-100/50 h-full aspect-[3/2] ml-2"
+          class:bg-[#1a1a1a]={$settings.diffDarkBg === "true"}
         />
       {/if}
     </div>

diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
@@ -27,6 +27,14 @@
 <SettingsField type="select" title="Theme" options={themes} bind:value={$settings.theme}>
   Select a theme
 </SettingsField>
+<SettingsField
+  type="checkbox"
+  title="Dark Background"
+  options={themes}
+  bind:value={$settings.diffDarkBg}
+>
+  Use a dark background behind the "difference" panel regardless of theme
+</SettingsField>
 <a href="https://github.com/khui0/flaggle" title="GitHub" class="self-center text-2xl"
   ><BiGithub></BiGithub></a
 >

diff --git a/src/routes/settings/SettingsField.svelte b/src/routes/settings/SettingsField.svelte
@@ -40,7 +40,7 @@
           value = checkbox.checked ? "true" : "false";
         }}
       />
-      <span class="label-text text-neutral-content"><slot></slot></span>
+      <span class="label-text text-neutral-content mt-0.5"><slot></slot></span>
     </label>
   {:else if type === "select"}
     <label class="label cursor-pointer flex-col items-start justify-normal gap-2 p-1">