diff options
| author | Fuwn <[email protected]> | 2023-09-03 22:56:00 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2023-09-03 22:56:00 -0700 |
| commit | cf18f1986ab373989b92245f2b15ce933a2a3662 (patch) | |
| tree | 44be1ea5e3a7341300ec331715e09e1ff1eed64c /src | |
| parent | revert: "feat(html): local css" (diff) | |
| download | due.moe-cf18f1986ab373989b92245f2b15ce933a2a3662.tar.xz due.moe-cf18f1986ab373989b92245f2b15ce933a2a3662.zip | |
feat: dark theme
Diffstat (limited to 'src')
| -rw-r--r-- | src/app.html | 16 | ||||
| -rw-r--r-- | src/routes/+layout.svelte | 19 | ||||
| -rw-r--r-- | src/routes/settings/+page.svelte | 12 | ||||
| -rw-r--r-- | src/stores/settings.ts | 4 |
4 files changed, 50 insertions, 1 deletions
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 @@ </head> <body data-sveltekit-preload-data="hover" style="max-width: 90% !important"> + <style> + html { + transition: 300ms; + } + + @media (prefers-color-scheme: dark) { + html { + filter: invert(1) hue-rotate(180deg); + } + + html img { + filter: invert(1) hue-rotate(180deg); + } + } + </style> + <div style="display: contents">%sveltekit.body%</div> </body> </html> 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)} 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 = () => { |