69 lines
1.6 KiB
Svelte
69 lines
1.6 KiB
Svelte
<script>
|
|
import { onMount } from "svelte";
|
|
|
|
let is_resize = false;
|
|
let is_transparent = false;
|
|
let is_dark = true;
|
|
let is_update = false;
|
|
|
|
function handleSwitchDarkMode() {
|
|
setTimeout(() => {
|
|
is_transparent = true;
|
|
is_dark = !is_dark;
|
|
setTimeout(() => {
|
|
is_resize = false;
|
|
is_transparent = false;
|
|
setTimeout(() => {
|
|
is_update = true;
|
|
setTimeout(() => {
|
|
is_update = false;
|
|
}, 0);
|
|
}, 0);
|
|
}, 250);
|
|
}, 500);
|
|
is_resize = true;
|
|
|
|
const isDark = window.document.documentElement.classList.toggle("dark");
|
|
if (isDark) {
|
|
localStorage.setItem("color-theme", "dark");
|
|
} else {
|
|
localStorage.setItem("color-theme", "light");
|
|
}
|
|
}
|
|
|
|
onMount(() => {
|
|
if (localStorage.getItem("color-theme") === "light") {
|
|
is_dark = false;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{#if !is_update}
|
|
<div class="min-w-[40px] min-h-[40px] flex justify-center items-center">
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<div
|
|
class="group min-h-[50px] min-w-[50px] rounded-full flex justify-center items-center
|
|
{is_dark ? 'bg-[var(--w-bg)]' : 'bg-[var(--b-bg)]'}
|
|
"
|
|
on:click={handleSwitchDarkMode}
|
|
>
|
|
<div
|
|
class=" rounded-full
|
|
{!is_transparent
|
|
? is_dark
|
|
? 'group-hover:bg-[var(--b-bg)] dark:group-hover:bg-[var(--b-bg)]'
|
|
: 'group-hover:bg-[var(--w-bg)] dark:group-hover:bg-[var(--w-bg)]'
|
|
: ''}
|
|
|
|
{!is_transparent
|
|
? is_resize
|
|
? 'h-[50px] w-[50px]'
|
|
: 'h-[25px] w-[25px]'
|
|
: 'h-[25px] w-[25px]'}
|
|
transition-all duration-500 ease-in-out"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
{/if}
|