public/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-26 06:30:43 +09:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

refactor: theme manager (#17976)

Browse Source
This commit is contained in:
Jason Rasmussen
2025-04-29 17:44:09 -04:00
committed by GitHub
parent 2c2dd01bf0
commit 038a82c4f1
11 changed files with 197 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/lib/components/shared-components/theme-button.svelte
View File

@@ -1,13 +1,11 @@
<script lang="ts">
import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
import CircleIconButton, { type Padding } from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { Theme } from '$lib/constants';
import { colorTheme, handleToggleTheme } from '$lib/stores/preferences.store';
import { themeManager } from '$lib/managers/theme-manager.svelte';
import { t } from 'svelte-i18n';
let icon = $derived($colorTheme.value === Theme.LIGHT ? moonPath : sunPath);
let viewBox = $derived($colorTheme.value === Theme.LIGHT ? moonViewBox : sunViewBox);
let isDark = $derived($colorTheme.value === Theme.DARK);
let icon = $derived(themeManager.isDark ? sunPath : moonPath);
let viewBox = $derived(themeManager.isDark ? sunViewBox : moonViewBox);
interface Props {
padding?: Padding;
@@ -16,14 +14,14 @@
let { padding = '3' }: Props = $props();
</script>
{#if !$colorTheme.system}
{#if !themeManager.theme.system}
<CircleIconButton
title={$t('toggle_theme')}
{icon}
{viewBox}
role="switch"
aria-checked={isDark ? 'true' : 'false'}
onclick={handleToggleTheme}
aria-checked={themeManager.isDark ? 'true' : 'false'}
onclick={() => themeManager.toggleTheme()}
{padding}
/>
{/if}