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"> <script lang="ts">
import { afterUpdate } from "svelte"; import { afterUpdate } from "svelte";
import DarkMode from "svelte-dark-mode"; import DarkMode from "svelte-dark-mode";
import type { Theme } from "svelte-dark-mode/types/DarkMode.svelte";
let theme: Theme; let theme: "dark" | "light";
afterUpdate(() => { afterUpdate(() => {
document.documentElement.className = theme; document.documentElement.className = theme;
@ -16,16 +15,4 @@
<DarkMode bind:theme /> <DarkMode bind:theme />
{#if theme === "dark"} <div on:click={toggle} class="i-fa6-solid:{theme === "dark" ? "sun" : "moon"} cursor-pointer flex items-center" />
<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>

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"]
}); });