helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(web): auto switch theme (#6176)

Browse source 
* move from app.html to user-page-layout.svelte

* fix: use layout.svelte

* simplify

* fix: map style don't change

* fix: auto switch theme map

* use constants

* simplify

* rename

* rename settign

* fix: remove

* pr feedback

* fix: tests

* fix: migration

* fix: migration

* pr feedback

* simplify

* simplify

* pr feedback

* fix: merge

* chore: set insetad of toggle on click

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
martin 2024-01-07 01:15:25 +01:00 • committed by GitHub
parent 41a32b4e6b
commit 84e60ea155
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 144 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

37
web/src/lib/stores/preferences.store.ts
View file

@ -1,13 +1,42 @@
import { browser } from '$app/environment';
import { Theme } from '$lib/constants';
import { persisted } from 'svelte-local-storage-store';
import { get } from 'svelte/store';
const initialTheme = browser && !window.matchMedia('(prefers-color-scheme: dark)').matches ? 'light' : 'dark';
export interface ThemeSetting {
value: Theme;
system: boolean;
}
export const handleToggleTheme = () => {
const theme = get(colorTheme);
theme.value = theme.value === Theme.DARK ? Theme.LIGHT : Theme.DARK;
colorTheme.set(theme);
};
const initTheme = (): ThemeSetting => {
if (browser) {
if (!window.matchMedia('(prefers-color-scheme: dark)').matches) {
return { value: Theme.LIGHT, system: false };
}
}
return { value: Theme.DARK, system: false };
};
const initialTheme = initTheme();
// The 'color-theme' key is also used by app.html to prevent FOUC on page load.
export const colorTheme = persisted<'dark' | 'light'>('color-theme', initialTheme, {
export const colorTheme = persisted<ThemeSetting>('color-theme', initialTheme, {
serializer: {
parse: (text) => (text === 'light' ? text : 'dark'),
stringify: (obj) => obj,
parse: (text: string): ThemeSetting => {
const parsedText: ThemeSetting = JSON.parse(text);
if (Object.values(Theme).includes(parsedText.value)) {
return parsedText;
} else {
return initTheme();
}
},
stringify: (obj) => JSON.stringify(obj),
},
});