website/src/lib/ThemeToggle.svelte

34 lines
633 B
Svelte
Raw Normal View History

<script lang="ts">
import { afterUpdate } from "svelte";
import DarkMode from "svelte-dark-mode";
import type { Theme } from "svelte-dark-mode/types/DarkMode.svelte";
let theme: Theme;
afterUpdate(() => {
document.documentElement.className = theme;
});
let toggle = () => {
theme = theme === "dark" ? "light" : "dark";
};
</script>
<DarkMode bind:theme />
{#if theme === "dark"}
2022-08-08 13:16:52 +05:30
<div on:click={toggle} class="i-fa6-solid:sun">
2022-08-08 10:50:03 +05:30
</div>
{:else if theme === "light"}
2022-08-08 13:16:52 +05:30
<div on:click={toggle} class="i-fa6-solid:moon">
2022-08-08 10:50:03 +05:30
</div>
{/if}
<style>
2022-08-08 10:50:03 +05:30
div {
cursor: pointer;
display: flex;
align-items: center;
}
</style>