feat: dark theme

2 files changed, 31 insertions, 0 deletions

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 @@
 <hr />
 
 <slot />
+
+<style>
+	:global(html.light-theme) {
+		filter: invert(0);
+	}
+
+	:global(html.light-theme img) {
+		filter: invert(0);
+	}
+</style>
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
@@ -37,6 +37,18 @@
 	<a
 		href={'#'}
 		on:click={() =>
+			$settings.forceLightTheme
+				? settings.setKey('forceLightTheme', false)
+				: settings.setKey('forceLightTheme', true)}
+		>{$settings.forceLightTheme ? 'Use preferred theme' : 'Force light theme'}</a
+	>
+	<br />
+
+	<p />
+
+	<a
+		href={'#'}
+		on:click={() =>
 			$settings.displayUnresolved
 				? settings.setKey('displayUnresolved', false)
 				: settings.setKey('displayUnresolved', true)}