mirror of
https://github.com/ProjectSegfault/website.git
synced 2024-12-23 13:40:00 +05:30
refactor theme toggler code
This commit is contained in:
parent
6de72381e0
commit
544afa93bf
@ -1,9 +1,8 @@
|
||||
<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;
|
||||
let theme: "dark" | "light";
|
||||
|
||||
afterUpdate(() => {
|
||||
document.documentElement.className = theme;
|
||||
@ -16,16 +15,4 @@
|
||||
|
||||
<DarkMode bind:theme />
|
||||
|
||||
{#if theme === "dark"}
|
||||
<div on:click={toggle} class="i-fa6-solid:sun" />
|
||||
{:else if theme === "light"}
|
||||
<div on:click={toggle} class="i-fa6-solid:moon" />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
div {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
<div on:click={toggle} class="i-fa6-solid:{theme === "dark" ? "sun" : "moon"} cursor-pointer flex items-center" />
|
@ -20,5 +20,7 @@ export default defineConfig({
|
||||
})
|
||||
],
|
||||
|
||||
transformers: [transformerVariantGroup(), transformerDirectives()]
|
||||
transformers: [transformerVariantGroup(), transformerDirectives()],
|
||||
|
||||
safelist: ["i-fa6-solid:moon", "i-fa6-solid:sun"]
|
||||
});
|
Loading…
Reference in New Issue
Block a user