30 lines
873 B
Svelte
30 lines
873 B
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import Fa from 'svelte-fa'
|
|
import {faSun, faMoon} from '@fortawesome/free-regular-svg-icons'
|
|
|
|
let darkMode = false;
|
|
const THEME_KEY = 'themePreference';
|
|
|
|
function setDarkTheme(dark: boolean) {
|
|
darkMode = dark;
|
|
document.documentElement.classList.toggle('dark', darkMode);
|
|
}
|
|
|
|
function toggleMode() {
|
|
setDarkTheme(!darkMode);
|
|
window.localStorage.setItem(THEME_KEY, darkMode ? 'dark' : 'light');
|
|
}
|
|
|
|
onMount(() => {
|
|
const theme = window.localStorage.getItem(THEME_KEY);
|
|
setDarkTheme(theme === 'dark' || (theme == null && window.matchMedia('(prefers-color-scheme: dark)').matches))
|
|
});
|
|
</script>
|
|
<div on:click={toggleMode}>
|
|
{#if darkMode}
|
|
<Fa fw icon={faMoon} />
|
|
{:else}
|
|
<Fa fw icon={faSun} />
|
|
{/if}
|
|
</div> |