From cf18f1986ab373989b92245f2b15ce933a2a3662 Mon Sep 17 00:00:00 2001 From: Fuwn Date: Sun, 3 Sep 2023 22:56:00 -0700 Subject: feat: dark theme --- src/app.html | 16 ++++++++++++++++ src/routes/+layout.svelte | 19 +++++++++++++++++++ src/routes/settings/+page.svelte | 12 ++++++++++++ src/stores/settings.ts | 4 +++- 4 files changed, 50 insertions(+), 1 deletion(-) diff --git a/src/app.html b/src/app.html index 801d1a78..fb37d49a 100644 --- a/src/app.html +++ b/src/app.html @@ -27,6 +27,22 @@ + +
%sveltekit.body%
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 07c5435a..a11ea3ee 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -4,6 +4,7 @@ import { onMount } from 'svelte'; import { lastActivityDate } from '$lib/AniList/activity'; import userIdentity from '../stores/userIdentity'; + import settings from '../stores/settings'; export let data; @@ -11,6 +12,14 @@ let lastActivityWasToday = true; onMount(async () => { + settings.subscribe((value) => { + if (value.forceLightTheme === true) { + document.documentElement.classList.add('light-theme'); + } else { + document.documentElement.classList.remove('light-theme'); + } + }); + if (data.user !== undefined) { if ($userIdentity === '') { userIdentity.set(JSON.stringify(await getUserIdentity(data.user))); @@ -48,3 +57,13 @@
+ + diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte index 39c67391..2cc7ea0a 100644 --- a/src/routes/settings/+page.svelte +++ b/src/routes/settings/+page.svelte @@ -34,6 +34,18 @@ {:else}

Display

+ + $settings.forceLightTheme + ? settings.setKey('forceLightTheme', false) + : settings.setKey('forceLightTheme', true)} + >{$settings.forceLightTheme ? 'Use preferred theme' : 'Force light theme'} +
+ +

+ diff --git a/src/stores/settings.ts b/src/stores/settings.ts index 9396ec74..c802e8b2 100644 --- a/src/stores/settings.ts +++ b/src/stores/settings.ts @@ -10,6 +10,7 @@ interface Settings { displayUnresolved: boolean; roundDownChapters: boolean; sortByDifference: boolean; + forceLightTheme: boolean; } const defaultSettings: Settings = { @@ -20,7 +21,8 @@ const defaultSettings: Settings = { displayNotStarted: false, displayUnresolved: false, roundDownChapters: true, - sortByDifference: false + sortByDifference: false, + forceLightTheme: false }; const createStore = () => { -- cgit v1.2.3