Merge remote-tracking branch 'upstream/main' into file-name-options

src/app.scss

@@ -39,6 +39,7 @@
 	--fg-muted-alt: hsl(0, 0%, 75%);
 	--fg-highlight: hsl(303, 61%, 47%);
 	--fg-failure: hsl(0, 67%, 49%);
+	color-scheme: light;
 }
 
 @mixin dark {
@@ -51,25 +52,26 @@
 	--fg-muted-alt: hsl(0, 0%, 25%);
 	--fg-highlight: hsl(303, 64%, 65%);
 	--fg-failure: hsl(0, 67%, 80%);
+	color-scheme: dark;
 }
 
 @media (prefers-color-scheme: dark) {
-	body {
+	:root {
 		@include dark;
 	}
 }
 
 @media (prefers-color-scheme: light) {
-	body {
+	:root {
 		@include light;
 	}
 }
 
-body.light {
+:root.light {
 	@include light;
 }
 
-body.dark {
+:root.dark {
 	@include dark;
 }
 

src/lib/components/functional/Dropdown.svelte

@@ -13,6 +13,7 @@
 	let { options, selected = $bindable(), onselect }: Props = $props();
 
 	let open = $state(false);
+	let hover = $state(false);
 	let isUp = $state(false);
 	let dropdown = $state<HTMLDivElement>();
 
@@ -49,6 +50,8 @@
 	<button
 		class="font-display w-full min-w-fit justify-between overflow-hidden relative cursor-pointer px-3 border-2 border-solid flex items-center bg-background border-foreground-muted-alt rounded-xl p-2 focus:!outline-none"
 		onclick={toggle}
+		onmouseenter={() => (hover = true)}
+		onmouseleave={() => (hover = false)}
 	>
 		<!-- <p>{selected}</p> -->
 		<div
@@ -104,6 +107,7 @@
 	</button>
 	{#if open}
 		<div
+			style={hover ? "will-change: opacity, blur, transform" : ""}
 			transition:blur={{
 				duration,
 				easing: quintOut,

src/routes/+layout.svelte

@@ -9,12 +9,15 @@
 	import { files, theme } from "$lib/store/index.svelte";
 	import JSCookie from "js-cookie";
 	import { MoonIcon, SunIcon } from "lucide-svelte";
+	import { onMount } from "svelte";
 	import { quintOut } from "svelte/easing";
 	import { writable } from "svelte/store";
 	import "../app.scss";
 	let { children, data } = $props();
 
 	let shouldGoBack = writable(false);
+	let navbar = $state<HTMLDivElement>();
+	let hover = $state(false);
 
 	const links = $derived<
 		{
@@ -53,16 +56,16 @@
 	$effect(() => {
 		if (!browser) return;
 		if (theme.dark) {
-			document.body.classList.add("dark");
+			document.documentElement.classList.add("dark");
-			document.body.classList.remove("light");
+			document.documentElement.classList.remove("light");
 			JSCookie.set("theme", "dark", {
 				path: "/",
 				sameSite: "lax",
 				expires: 2147483647,
 			});
 		} else {
-			document.body.classList.add("light");
+			document.documentElement.classList.add("light");
-			document.body.classList.remove("dark");
+			document.documentElement.classList.remove("dark");
 			JSCookie.set("theme", "light", {
 				path: "/",
 				sameSite: "lax",
@@ -70,6 +73,19 @@
 			});
 		}
 	});
+
+	onMount(() => {
+		const mouseEnter = () => {
+			hover = true;
+		};
+
+		const mouseLeave = () => {
+			hover = false;
+		};
+
+		navbar?.addEventListener("mouseenter", mouseEnter);
+		navbar?.addEventListener("mouseleave", mouseLeave);
+	});
 </script>
 
 <svelte:head>
@@ -102,6 +118,7 @@
 
 	<div
 		class="w-full max-w-screen-md p-1 border-solid border-2 rounded-2xl border-foreground-muted-alt flex mb-10 mx-auto lg:mt-5"
+		bind:this={navbar}
 	>
 		<div class="md:p-1">
 			<a
@@ -200,6 +217,7 @@
 			<div class="w-full">
 				<div
 					class="absolute top-0 left-0 w-full"
+					style={hover ? "will-change: opacity, blur, transform" : ""}
 					in:blur={{
 						duration,
 						easing: quintOut,

tailwind.config.ts

@@ -28,8 +28,8 @@ export default {
 	plugins: [
 		plugin(function ({ addVariant }) {
 			addVariant("dynadark", [
-				"body:not(.light).dark &",
+				":root:not(.light).dark &",
-				"@media (prefers-color-scheme: dark) { body:not(.light) &",
+				"@media (prefers-color-scheme: dark) { :root:not(.light) &",
 			]);
 		}),
 	],