mirror/VERT
1
0
Fork 0
mirror of https://github.com/VERT-sh/VERT.git synced 2026-02-21 23:38:28 -06:00
Code Issues Packages Projects Releases Wiki Activity

remove theme class in store

Browse Source
This commit is contained in:
JovannMC
2025-01-17 22:07:28 +03:00
parent 7c0f2c87d1
commit 7d74eb6524
4 changed files with 46 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,6 @@
import { browser } from "$app/environment";
import { page } from "$app/stores";
import { duration, fade } from "$lib/animation";
import { theme } from "$lib/store/index.svelte";
import clsx from "clsx";
import { MoonIcon, SunIcon } from "lucide-svelte";
import { quintOut } from "svelte/easing";
@@ -127,7 +126,18 @@
{/each}
<div class="w-0.5 bg-separator h-full hidden md:flex"></div>
<button
onclick={theme.toggle}
onclick={() => {
const isDark = document.documentElement.classList.contains("dark");
if (isDark) {
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"
>
<SunIcon class="dynadark:hidden block" />

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

@@ -1,31 +1,48 @@
<script lang="ts">
import Panel from "$lib/components/visual/Panel.svelte";
import { theme } from "$lib/store/index.svelte";
import { MoonIcon, PaletteIcon, SunIcon } from "lucide-svelte";
import { onMount } from "svelte";
let lightElement: HTMLButtonElement;
let darkElement: HTMLButtonElement;
function setDark(dark: boolean) {
theme.dark = dark;
document.documentElement.classList.remove("light", "dark");
if (dark) {
lightElement.classList.remove("bg-accent-purple");
darkElement.classList.add("bg-accent-purple");
document.documentElement.classList.add("dark");
} else {
darkElement.classList.remove("bg-accent-purple");
lightElement.classList.add("bg-accent-purple");
document.documentElement.classList.add("light");
}
}
$effect(() => {
if (theme.dark) {
lightElement.classList.remove("bg-accent-purple");
darkElement.classList.add("bg-accent-purple");
} else {
darkElement.classList.remove("bg-accent-purple");
lightElement.classList.add("bg-accent-purple");
}
onMount(() => {
const updateClasses = () => {
const list = document.documentElement.classList;
if (list.contains("dark")) {
lightElement.classList.remove("bg-accent-purple");
darkElement.classList.add("bg-accent-purple");
} else {
darkElement.classList.remove("bg-accent-purple");
lightElement.classList.add("bg-accent-purple");
}
};
updateClasses();
// use MutationObserver to check when theme is changed (<html> classes)
const observer = new MutationObserver(updateClasses);
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"],
});
return () => observer.disconnect();
});
</script>

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

@@ -1,4 +1,3 @@
import { browser } from "$app/environment";
import { converters } from "$lib/converters";
import { error, log } from "$lib/logger";
import { VertFile } from "$lib/types";
@@ -174,34 +173,6 @@ class Files {
}
}
class Theme {
private _dark = $state(false);
public get dark() {
return this._dark;
}
public set dark(value: boolean) {
this._dark = value;
if (!browser) return;
log(["theme"], `set to ${this.dark ? "dark" : "light"}`);
window.plausible("Theme set", {
props: { theme: theme.dark ? "dark" : "light" },
});
if (value) {
document.documentElement.classList.add("dark");
document.documentElement.classList.remove("light");
localStorage.setItem("theme", "dark");
} else {
document.documentElement.classList.add("light");
document.documentElement.classList.remove("dark");
localStorage.setItem("theme", "light");
}
}
public toggle = () => {
this.dark = !this.dark;
};
}
export const files = new Files();
export const theme = new Theme();
export const showGradient = writable(true);
export const gradientColor = writable("");

13
src/routes/+layout.svelte
View File

@@ -115,19 +115,20 @@
// Apply theme before DOM is loaded
let theme = localStorage.getItem("theme");
if (theme !== "light" && theme !== "dark") {
const prefersDark = window.matchMedia(
"(prefers-color-scheme: dark)",
).matches;
theme = prefersDark ? "dark" : "light";
if (!theme) {
// first time visitor
window.addEventListener("load", () => {
window.plausible("Theme set", {
props: { theme: theme.dark ? "dark" : "light" },
props: { theme: prefersDark ? "dark" : "light" },
});
});
}
// invalid theme or first time visitor, set to default
const prefersDark = window.matchMedia(
"(prefers-color-scheme: dark)",
).matches;
localStorage.setItem("theme", prefersDark ? "dark" : "light");
}
document.documentElement.classList.add(theme);