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

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

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