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

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

13
web/src/lib/components/onboarding-page/onboarding-theme.svelte
View file

@ -6,19 +6,12 @@
import { createEventDispatcher } from 'svelte';
import { colorTheme } from '$lib/stores/preferences.store';
import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
import { Theme } from '$lib/constants';
const dispatch = createEventDispatcher<{
done: void;
previous: void;
}>();
const toggleLightTheme = () => {
$colorTheme = 'light';
};
const toggleDarkTheme = () => {
$colorTheme = 'dark';
};
</script>
<OnboardingCard>
@ -31,7 +24,7 @@
<div class="flex gap-4 mb-6">
<button
class="w-1/2 aspect-square bg-immich-bg rounded-3xl transition-all shadow-sm hover:shadow-xl border-[3px] border-immich-dark-primary/80 border-immich-primary dark:border dark:border-transparent"
on:click={toggleLightTheme}
on:click={() => ($colorTheme.value = Theme.LIGHT)}
>
<div
class="flex flex-col place-items-center place-content-center justify-around h-full w-full text-immich-primary"
@ -42,7 +35,7 @@
</button>
<button
class="w-1/2 aspect-square bg-immich-dark-bg rounded-3xl dark:border-[3px] dark:border-immich-dark-primary/80 dark:border-immich-dark-primary border border-transparent"
on:click={toggleDarkTheme}
on:click={() => ($colorTheme.value = Theme.DARK)}
>
<div
class="flex flex-col place-items-center place-content-center justify-around h-full w-full text-immich-dark-primary"

3
web/src/lib/components/shared-components/map/map.svelte
View file

@ -22,6 +22,7 @@
import Icon from '$lib/components/elements/icon.svelte';
import { mdiCog, mdiMapMarker } from '@mdi/js';
import { createEventDispatcher } from 'svelte';
import { Theme } from '$lib/constants';
export let mapMarkers: MapMarkerResponseDto[];
export let showSettingsModal: boolean | undefined = undefined;
@ -36,7 +37,7 @@
$: style = (async () => {
const { data } = await api.systemConfigApi.getMapStyle({
theme: $mapSettings.allowDarkMode ? $colorTheme : 'light',
theme: $mapSettings.allowDarkMode ? $colorTheme.value : Theme.LIGHT,
});
return data as StyleSpecification;
})();

36
web/src/lib/components/shared-components/theme-button.svelte
View file

@ -1,29 +1,17 @@
<script lang="ts">
import { browser } from '$app/environment';
import { moonPath, sunPath, sunViewBox } from '$lib/assets/svg-paths';
import { colorTheme } from '$lib/stores/preferences.store';
import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
import { Theme } from '$lib/constants';
import { colorTheme, handleToggleTheme } from '$lib/stores/preferences.store';
import IconButton from '../elements/buttons/icon-button.svelte';
import Icon from '../elements/icon.svelte';
const toggleTheme = () => {
$colorTheme = $colorTheme === 'dark' ? 'light' : 'dark';
};
$: {
if (browser) {
if ($colorTheme === 'light') {
document.documentElement.classList.remove('dark');
} else {
document.documentElement.classList.add('dark');
}
}
}
</script>
<IconButton on:click={toggleTheme} title="Toggle theme">
{#if $colorTheme === 'light'}
<Icon path={moonPath} viewBox={sunViewBox} class="h-6 w-6" />
{:else}
<Icon path={sunPath} viewBox={sunViewBox} class="h-6 w-6" />
{/if}
</IconButton>
{#if !$colorTheme.system}
<IconButton on:click={handleToggleTheme} title="Toggle theme">
{#if $colorTheme.value === Theme.LIGHT}
<Icon path={moonPath} viewBox={sunViewBox} class="h-6 w-6" />
{:else}
<Icon path={sunPath} viewBox={moonViewBox} class="h-6 w-6" />
{/if}
</IconButton>
{/if}

24
web/src/lib/components/user-settings-page/appearance-settings.svelte Normal file
View file

@ -0,0 +1,24 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import { colorTheme } from '../../stores/preferences.store';
import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
export const handleToggle = () => {
$colorTheme.system = !$colorTheme.system;
};
</script>
<section class="my-4">
<div in:fade={{ duration: 500 }}>
<div class="ml-4 mt-4 flex flex-col gap-4">
<div class="ml-4">
<SettingSwitch
title="Theme selection"
subtitle="Automatically set the theme to light or dark based on your browser's system preference"
bind:checked={$colorTheme.system}
on:toggle={handleToggle}
/>
</div>
</div>
</div>
</section>

5
web/src/lib/components/user-settings-page/user-settings-list.svelte
View file

@ -14,6 +14,7 @@
import UserAPIKeyList from './user-api-key-list.svelte';
import UserProfileSettings from './user-profile-settings.svelte';
import { user } from '$lib/stores/user.store';
import AppearanceSettings from './appearance-settings.svelte';
export let keys: APIKeyResponseDto[] = [];
export let devices: AuthDeviceResponseDto[] = [];
@ -24,6 +25,10 @@
}
</script>
<SettingAccordion title="Appearance" subtitle="Manage your Immich appearance">
<AppearanceSettings />
</SettingAccordion>
<SettingAccordion title="Account" subtitle="Manage your account">
<UserProfileSettings user={$user} />
</SettingAccordion>