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

remove theme class in store

This commit is contained in:
JovannMC 2025-01-17 22:07:28 +03:00
parent 7c0f2c87d1
commit 7d74eb6524
No known key found for this signature in database
4 changed files with 46 additions and 47 deletions
Show Stats 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 { 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 { theme } 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";
@ -127,7 +126,18 @@
{/each} {/each}
<div class="w-0.5 bg-separator h-full hidden md:flex"></div> <div class="w-0.5 bg-separator h-full hidden md:flex"></div>
<button <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" class="w-14 h-full items-center justify-center hidden md:flex"
> >
<SunIcon class="dynadark:hidden block" /> <SunIcon class="dynadark:hidden block" />

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

@ -1,31 +1,48 @@
<script lang="ts"> <script lang="ts">
import Panel from "$lib/components/visual/Panel.svelte"; import Panel from "$lib/components/visual/Panel.svelte";
import { theme } from "$lib/store/index.svelte";
import { MoonIcon, PaletteIcon, SunIcon } from "lucide-svelte"; import { MoonIcon, PaletteIcon, SunIcon } from "lucide-svelte";
import { onMount } from "svelte";
let lightElement: HTMLButtonElement; let lightElement: HTMLButtonElement;
let darkElement: HTMLButtonElement; let darkElement: HTMLButtonElement;
function setDark(dark: boolean) { function setDark(dark: boolean) {
theme.dark = dark; document.documentElement.classList.remove("light", "dark");
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");
} 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");
} }
} }
$effect(() => { onMount(() => {
if (theme.dark) { const updateClasses = () => {
lightElement.classList.remove("bg-accent-purple"); const list = document.documentElement.classList;
darkElement.classList.add("bg-accent-purple"); if (list.contains("dark")) {
} else { lightElement.classList.remove("bg-accent-purple");
darkElement.classList.remove("bg-accent-purple"); darkElement.classList.add("bg-accent-purple");
lightElement.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> </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 { converters } from "$lib/converters";
import { error, log } from "$lib/logger"; import { error, log } from "$lib/logger";
import { VertFile } from "$lib/types"; 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 files = new Files();
export const theme = new Theme();
export const showGradient = writable(true); export const showGradient = writable(true);
export const gradientColor = writable(""); export const gradientColor = writable("");

13
src/routes/+layout.svelte
View File

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