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

clean up & fix theme code

This commit is contained in:
JovannMC 2025-01-17 22:21:32 +03:00
parent 7d74eb6524
commit b904ce913a
No known key found for this signature in database
3 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/components/functional/Navbar.svelte
View File

@ -2,6 +2,7 @@
import { browser } from "$app/environment"; import { browser } from "$app/environment";
import { page } from "$app/stores"; import { page } from "$app/stores";
import { duration, fade } from "$lib/animation"; import { duration, fade } from "$lib/animation";
import { setTheme } from "$lib/store/index.svelte";
import clsx from "clsx"; import clsx from "clsx";
import { MoonIcon, SunIcon } from "lucide-svelte"; import { MoonIcon, SunIcon } from "lucide-svelte";
import { quintOut } from "svelte/easing"; import { quintOut } from "svelte/easing";
@ -128,15 +129,7 @@
<button <button
onclick={() => { onclick={() => {
const isDark = document.documentElement.classList.contains("dark"); const isDark = document.documentElement.classList.contains("dark");
if (isDark) { setTheme(isDark ? "light" : "dark");
document.documentElement.classList.add("light");
document.documentElement.classList.remove("dark");
localStorage.setItem("theme", "light");
} else {
document.documentElement.classList.add("dark");
document.documentElement.classList.remove("light");
localStorage.setItem("theme", "dark");
}
}} }}
class="w-14 h-full items-center justify-center hidden md:flex" class="w-14 h-full items-center justify-center hidden md:flex"
> >

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

@ -1,5 +1,7 @@
<script lang="ts"> <script lang="ts">
import Panel from "$lib/components/visual/Panel.svelte"; import Panel from "$lib/components/visual/Panel.svelte";
import { log } from "$lib/logger";
import { setTheme } from "$lib/store/index.svelte";
import { MoonIcon, PaletteIcon, SunIcon } from "lucide-svelte"; import { MoonIcon, PaletteIcon, SunIcon } from "lucide-svelte";
import { onMount } from "svelte"; import { onMount } from "svelte";
@ -12,12 +14,14 @@
if (dark) { if (dark) {
lightElement.classList.remove("bg-accent-purple"); lightElement.classList.remove("bg-accent-purple");
darkElement.classList.add("bg-accent-purple"); darkElement.classList.add("bg-accent-purple");
document.documentElement.classList.add("dark"); setTheme("dark");
} else { } else {
darkElement.classList.remove("bg-accent-purple"); darkElement.classList.remove("bg-accent-purple");
lightElement.classList.add("bg-accent-purple"); lightElement.classList.add("bg-accent-purple");
document.documentElement.classList.add("light"); setTheme("light");
} }
log
} }
onMount(() => { onMount(() => {

10
src/lib/store/index.svelte.ts
View File

@ -173,6 +173,16 @@ class Files {
} }
} }
export function setTheme(theme: "light" | "dark") {
document.documentElement.classList.remove("light", "dark");
document.documentElement.classList.add(theme);
localStorage.setItem("theme", theme);
window.plausible("Theme set", {
props: { theme },
});
log(["theme"], `set to ${theme}`);
}
export const files = new Files(); export const files = new Files();
export const showGradient = writable(true); export const showGradient = writable(true);
export const gradientColor = writable(""); export const gradientColor = writable("");