immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-17 09:13:17 +03:00
Code Issues Packages Projects Releases 16 Wiki Activity

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
9 changed files with 144 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
web/src/routes/+layout.svelte
View File

@@ -11,15 +11,15 @@
import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
import AppleHeader from '$lib/components/shared-components/apple-header.svelte';
import { onMount } from 'svelte';
import { onDestroy, onMount } from 'svelte';
import { loadConfig } from '$lib/stores/server-config.store';
import { handleError } from '$lib/utils/handle-error';
import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
import { api } from '@api';
import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket';
import { user } from '$lib/stores/user.store';
import { browser } from '$app/environment';
import { colorTheme } from '$lib/stores/preferences.store';
import { ThemeSetting, colorTheme, handleToggleTheme } from '$lib/stores/preferences.store';
import { Theme } from '$lib/constants';
let showNavigationLoadingBar = false;
let albumId: string | undefined;
@@ -27,15 +27,35 @@
const isSharedLinkRoute = (route: string | null) => route?.startsWith('/(user)/share/[key]');
const isAuthRoute = (route?: string) => route?.startsWith('/auth');
$: {
if (browser) {
if ($colorTheme === 'light') {
document.documentElement.classList.remove('dark');
} else {
document.documentElement.classList.add('dark');
}
$: changeTheme($colorTheme);
const changeTheme = (theme: ThemeSetting) => {
if (theme.system) {
theme.value =
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? Theme.DARK : Theme.LIGHT;
}
}
if (theme.value === Theme.LIGHT) {
document.documentElement.classList.remove('dark');
} else {
document.documentElement.classList.add('dark');
}
};
const handleChangeTheme = () => {
if ($colorTheme.system) {
handleToggleTheme();
}
};
onMount(() => {
// if the browser theme changes, changes the Immich theme too
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', handleChangeTheme);
});
onDestroy(() => {
document.removeEventListener('change', handleChangeTheme);
});
if (isSharedLinkRoute($page.route?.id)) {
api.setKey($page.params.key);