From cf18f1986ab373989b92245f2b15ce933a2a3662 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 3 Sep 2023 22:56:00 -0700
Subject: feat: dark theme

---
 src/routes/+layout.svelte        | 19 +++++++++++++++++++
 src/routes/settings/+page.svelte | 12 ++++++++++++
 2 files changed, 31 insertions(+)

(limited to 'src/routes')

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
@@ -34,6 +34,18 @@
 {:else}
 	<h2>Display</h2>
 
+	<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={() =>
-- 
cgit v1.2.3