forked from Cutlery/immich
2cc5149d0b
* feat: previous on the onboarding * fix: storage full screen * feat: transition * use svelte files for svg * fix: use icon component * fix: additional check * styling' --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
30 lines
885 B
Svelte
30 lines
885 B
Svelte
<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 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>
|