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

Change icon, fix selected btns behaviour

This commit is contained in:
JovannMC 2025-01-21 20:17:29 +03:00
parent d3cba40dbb
commit fb5484b32c
No known key found for this signature in database
2 changed files with 33 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.scss
View File

@ -190,6 +190,10 @@ body {
@apply hover:scale-[1.15] duration-200; @apply hover:scale-[1.15] duration-200;
} }
.selected {
@apply bg-accent-purple !text-black;
}
@layer components { @layer components {
select { select {
@apply appearance-none; @apply appearance-none;

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

@ -1,7 +1,13 @@
<script lang="ts"> <script lang="ts">
import Panel from "$lib/components/visual/Panel.svelte"; import Panel from "$lib/components/visual/Panel.svelte";
import { setMotion, setTheme } from "$lib/store/index.svelte"; import { setMotion, setTheme } from "$lib/store/index.svelte";
import { MoonIcon, PaletteIcon, SunIcon } from "lucide-svelte"; import {
MoonIcon,
PaletteIcon,
PauseIcon,
PlayIcon,
SunIcon,
} from "lucide-svelte";
import { onMount } from "svelte"; import { onMount } from "svelte";
let lightElement: HTMLButtonElement; let lightElement: HTMLButtonElement;
@ -13,24 +19,24 @@
document.documentElement.classList.remove("light", "dark"); document.documentElement.classList.remove("light", "dark");
if (dark) { if (dark) {
lightElement.classList.remove("bg-accent-purple"); lightElement.classList.remove("selected");
darkElement.classList.add("bg-accent-purple"); darkElement.classList.add("selected");
setTheme("dark"); setTheme("dark");
} else { } else {
darkElement.classList.remove("bg-accent-purple"); darkElement.classList.remove("selected");
lightElement.classList.add("bg-accent-purple"); lightElement.classList.add("selected");
setTheme("light"); setTheme("light");
} }
} }
function setAnimation(motion: boolean) { function setAnimation(motion: boolean) {
if (motion) { if (motion) {
enableMotionElement.classList.add("bg-accent-purple"); enableMotionElement.classList.add("selected");
disableMotionElement.classList.remove("bg-accent-purple"); disableMotionElement.classList.remove("selected");
setMotion(true); setMotion(true);
} else { } else {
disableMotionElement.classList.add("bg-accent-purple"); disableMotionElement.classList.add("selected");
enableMotionElement.classList.remove("bg-accent-purple"); enableMotionElement.classList.remove("selected");
setMotion(false); setMotion(false);
} }
} }
@ -39,22 +45,22 @@
const updateTheme = () => { const updateTheme = () => {
const list = document.documentElement.classList; const list = document.documentElement.classList;
if (list.contains("dark")) { if (list.contains("dark")) {
lightElement.classList.remove("bg-accent-purple"); lightElement.classList.remove("selected");
darkElement.classList.add("bg-accent-purple"); darkElement.classList.add("selected");
} else { } else {
darkElement.classList.remove("bg-accent-purple"); darkElement.classList.remove("selected");
lightElement.classList.add("bg-accent-purple"); lightElement.classList.add("selected");
} }
}; };
updateTheme(); updateTheme();
if (localStorage.getItem("motion") === "true") { if (localStorage.getItem("motion") === "true") {
enableMotionElement.classList.add("bg-accent-purple"); enableMotionElement.classList.add("selected");
disableMotionElement.classList.remove("bg-accent-purple"); disableMotionElement.classList.remove("selected");
} else { } else {
disableMotionElement.classList.add("bg-accent-purple"); disableMotionElement.classList.add("selected");
enableMotionElement.classList.remove("bg-accent-purple"); enableMotionElement.classList.remove("selected");
} }
// use MutationObserver to check when theme is changed (<html> class changes) // use MutationObserver to check when theme is changed (<html> class changes)
@ -122,19 +128,19 @@
<button <button
bind:this={enableMotionElement} bind:this={enableMotionElement}
onclick={() => setAnimation(true)} onclick={() => setAnimation(true)}
class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-centerr" 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" /> <PlayIcon size="24" class="inline-block mr-2" />
Enable Animations Enable animations
</button> </button>
<button <button
bind:this={disableMotionElement} bind:this={disableMotionElement}
onclick={() => setAnimation(false)} onclick={() => setAnimation(false)}
class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-centerr" class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
> >
<MoonIcon size="24" class="inline-block mr-2" /> <PauseIcon size="24" class="inline-block mr-2" />
Disable Animations Disable animations
</button> </button>
</div> </div>
</div> </div>