Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-05-24 01:12:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore: use library theme button

Browse Source
This commit is contained in:
Alex Tran 2025-03-12 08:51:07 -05:00
parent a75718ce99
commit 57b44f9a3b
2 changed files with 7 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/package-lock.json generated
View File

@ -87,7 +87,7 @@
"@oazapfts/runtime": "^1.0.2"
},
"devDependencies": {
"@types/node": "^22.13.5",
"@types/node": "^22.13.9",
"typescript": "^5.3.3"
}
},

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

@ -1,29 +1,13 @@
<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 { t } from 'svelte-i18n';
import { colorTheme } from '$lib/stores/preferences.store';
import { ThemeSwitcher, Theme as ImmichTheme } from '@immich/ui';
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);
interface Props {
padding?: Padding;
}
let { padding = '3' }: Props = $props();
const onThemeToggle = (theme: ImmichTheme) => {
$colorTheme.value = theme === ImmichTheme.Light ? Theme.LIGHT : Theme.DARK;
};
</script>
{#if !$colorTheme.system}
<CircleIconButton
title={$t('toggle_theme')}
{icon}
{viewBox}
role="switch"
aria-checked={isDark ? 'true' : 'false'}
onclick={handleToggleTheme}
{padding}
/>
<ThemeSwitcher onChange={onThemeToggle} size="large" color="secondary" />
{/if}