Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-06-02 13:14:54 -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" "@oazapfts/runtime": "^1.0.2"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^22.13.5", "@types/node": "^22.13.9",
"typescript": "^5.3.3" "typescript": "^5.3.3"
} }
}, },

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

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