41 lines
867 B
Svelte
41 lines
867 B
Svelte
<script lang="ts">
|
|
import { Moon, Sun } from 'lucide-svelte';
|
|
import { theme, setTheme } from '$lib/theme'
|
|
|
|
function toggleTheme() {
|
|
theme.update((currentTheme) => {
|
|
const newTheme = currentTheme === 'tokiwa' ? 'star' : 'tokiwa'
|
|
|
|
document.documentElement.setAttribute('color-scheme', newTheme)
|
|
localStorage.setItem('color-scheme', newTheme)
|
|
|
|
if (newTheme === "tokiwa") {
|
|
document.documentElement.classList.remove('dark');
|
|
} else {
|
|
document.documentElement.classList.add('dark');
|
|
}
|
|
setTheme(newTheme);
|
|
return newTheme
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<button class="nav-link" on:click={toggleTheme} aria-label="Toggle Theme">
|
|
{#if $theme === "tokiwa"}
|
|
<Sun />
|
|
{:else}
|
|
<Moon />
|
|
{/if}
|
|
</button>
|
|
|
|
<style>
|
|
button {
|
|
padding: 0;
|
|
font-weight: inherit;
|
|
background: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|