RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make theme settings work

This commit is contained in:
JovannMC 2025-01-10 19:48:31 +03:00
parent 4dc0a5d0a9
commit 58b29d0827
No known key found for this signature in database
1 changed files with 35 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/lib/sections/settings/Appearance.svelte
View File

@ -1,14 +1,38 @@
<script lang="ts">
import Panel from "$lib/components/visual/Panel.svelte";
import { MoonIcon, RefreshCwIcon, SunIcon } from "lucide-svelte";
import { theme } from "$lib/store/index.svelte";
import { MoonIcon, PaletteIcon, SunIcon } from "lucide-svelte";
let value = $state("");
let lightElement: HTMLButtonElement;
let darkElement: HTMLButtonElement;
function setDark(dark: boolean) {
theme.dark = dark;
if (dark) {
lightElement.classList.remove("bg-violet-400");
darkElement.classList.add("bg-violet-400");
} else {
darkElement.classList.remove("bg-violet-400");
lightElement.classList.add("bg-violet-400");
}
}
$effect(() => {
if (theme.dark) {
lightElement.classList.remove("bg-violet-400");
darkElement.classList.add("bg-violet-400");
} else {
darkElement.classList.remove("bg-violet-400");
lightElement.classList.add("bg-violet-400");
}
});
</script>
<Panel class="flex flex-col gap-8 p-6">
<div class="flex flex-col gap-3">
<h2 class="text-2xl font-bold">
<RefreshCwIcon
<PaletteIcon
size="40"
class="inline-block -mt-1 mr-2 bg-violet-400 p-2 rounded-full"
color="black"
@ -26,22 +50,20 @@
<div class="flex flex-col gap-3 w-full">
<div class="flex gap-3 w-full">
<button
class="btn flex-1 p-4 rounded-lg bg-violet-400 text-black flex items-center justify-center"
bind:this={lightElement}
onclick={() => setDark(false)}
class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
>
<SunIcon
size="24"
class="inline-block mr-2"
/>
<SunIcon size="24" class="inline-block mr-2" />
Light
</button>
<button
class="btn flex-1 p-4 rounded-lg bg-button text-black dynadark:text-white flex items-center justify-center"
bind:this={darkElement}
onclick={() => setDark(true)}
class="btn flex-1 p-4 rounded-lg bg-button text-black flex items-center justify-center"
>
<MoonIcon
size="24"
class="inline-block mr-2"
/>
<MoonIcon size="24" class="inline-block mr-2" />
Dark
</button>
</div>