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

Simplify appearance code & fix anims defaults

This commit is contained in:
JovannMC 2025-02-05 20:32:02 +03:00
parent d835a50a01
commit b1f135df4c
No known key found for this signature in database
3 changed files with 45 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,11 @@
<script lang="ts">
import Panel from "$lib/components/visual/Panel.svelte";
import { motion, setMotion, setTheme } from "$lib/store/index.svelte";
import {
theme,
motion,
setMotion,
setTheme,
} from "$lib/store/index.svelte";
import {
MoonIcon,
PaletteIcon,
@ -8,70 +13,47 @@
PlayIcon,
SunIcon,
} from "lucide-svelte";
import { onMount } from "svelte";
import { onMount, onDestroy } from "svelte";
let lightElement: HTMLButtonElement;
let darkElement: HTMLButtonElement;
let enableMotionElement: HTMLButtonElement;
let disableMotionElement: HTMLButtonElement;
function setDark(dark: boolean) {
document.documentElement.classList.remove("light", "dark");
let motionUnsubscribe: () => void;
let themeUnsubscribe: () => void;
if (dark) {
lightElement.classList.remove("selected");
darkElement.classList.add("selected");
setTheme("dark");
} else {
darkElement.classList.remove("selected");
lightElement.classList.add("selected");
setTheme("light");
}
}
function setEffects(effects: boolean) {
if (effects) {
const updateMotionClasses = (value: boolean) => {
if (value) {
enableMotionElement.classList.add("selected");
disableMotionElement.classList.remove("selected");
setMotion(true);
} else {
disableMotionElement.classList.add("selected");
enableMotionElement.classList.remove("selected");
setMotion(false);
}
}
};
const updateThemeClasses = (value: string) => {
document.documentElement.classList.remove("light", "dark");
document.documentElement.classList.add(value);
if (value === "dark") {
darkElement.classList.add("selected");
lightElement.classList.remove("selected");
} else {
lightElement.classList.add("selected");
darkElement.classList.remove("selected");
}
};
onMount(() => {
const updateTheme = () => {
const list = document.documentElement.classList;
if (list.contains("dark")) {
lightElement.classList.remove("selected");
darkElement.classList.add("selected");
} else {
darkElement.classList.remove("selected");
lightElement.classList.add("selected");
}
};
motionUnsubscribe = motion.subscribe(updateMotionClasses);
themeUnsubscribe = theme.subscribe(updateThemeClasses);
});
updateTheme();
if ($motion) {
enableMotionElement.classList.add("selected");
disableMotionElement.classList.remove("selected");
} else {
disableMotionElement.classList.add("selected");
enableMotionElement.classList.remove("selected");
}
// use MutationObserver to check when theme is changed (<html> class changes)
const observer = new MutationObserver(updateTheme);
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"],
});
return () => observer.disconnect();
onDestroy(() => {
if (motionUnsubscribe) motionUnsubscribe();
if (themeUnsubscribe) themeUnsubscribe();
});
</script>
@ -97,7 +79,7 @@
<div class="flex gap-3 w-full">
<button
bind:this={lightElement}
onclick={() => setDark(false)}
onclick={() => setTheme("light")}
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" />
@ -106,7 +88,7 @@
<button
bind:this={darkElement}
onclick={() => setDark(true)}
onclick={() => setTheme("dark")}
class="btn flex-1 p-4 rounded-lg text-black flex items-center justify-center"
>
<MoonIcon size="24" class="inline-block mr-2" />
@ -127,7 +109,7 @@
<div class="flex gap-3 w-full">
<button
bind:this={enableMotionElement}
onclick={() => setEffects(true)}
onclick={() => setMotion(true)}
class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
>
<PlayIcon size="24" class="inline-block mr-2" />
@ -136,7 +118,7 @@
<button
bind:this={disableMotionElement}
onclick={() => setEffects(false)}
onclick={() => setMotion(false)}
class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
>
<PauseIcon size="24" class="inline-block mr-2" />

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

@ -173,14 +173,15 @@ class Files {
}
}
export function setTheme(theme: "light" | "dark") {
export function setTheme(themeTo: "light" | "dark") {
document.documentElement.classList.remove("light", "dark");
document.documentElement.classList.add(theme);
localStorage.setItem("theme", theme);
document.documentElement.classList.add(themeTo);
localStorage.setItem("theme", themeTo);
window.plausible("Theme set", {
props: { theme },
props: { theme: themeTo },
});
log(["theme"], `set to ${theme}`);
log(["theme"], `set to ${themeTo}`);
theme.set(themeTo);
}
export function setMotion(motionEnabled: boolean) {
@ -198,3 +199,4 @@ export const gradientColor = writable("");
export const isMobile = writable(false);
export const motion = writable(true);
export const theme = writable<"light" | "dark">("light");

3
src/routes/+layout.svelte
View File

@ -93,7 +93,8 @@
isMobile.set(window.innerWidth <= 768);
});
motion.set(localStorage.getItem("motion") === "true");
// defaults to true if not set
motion.set(localStorage.getItem("motion") !== "false");
});
let goingLeft = $state(false);