0xMRTT/webcompile
1
0
Fork 0
forked from ProjectSegfault/website
Code Pull Requests Activity

refactor theme toggler code

Browse Source
This commit is contained in:
Akis 2022-09-16 17:05:27 +03:00
parent 6de72381e0
commit 544afa93bf
Signed by untrusted user: akis
GPG Key ID: 267BF5C6677944ED
2 changed files with 5 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/lib/ThemeToggle.svelte
View File

@ -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" />

4
unocss.config.ts → uno.config.ts
View File

@ -20,5 +20,7 @@ export default defineConfig({
})
],
transformers: [transformerVariantGroup(), transformerDirectives()]
transformers: [transformerVariantGroup(), transformerDirectives()],
safelist: ["i-fa6-solid:moon", "i-fa6-solid:sun"]
});