feat: dynadark tailwind plugin for dark detection

src/lib/components/functional/FancyMenu.svelte

@@ -55,7 +55,7 @@
 			<div class="grid grid-cols-1 grid-rows-1">
 				{#key name}
 					<span
-						class="mix-blend-difference light:invert dark:invert-0 col-start-1 row-start-1 text-center"
+						class="mix-blend-difference invert dynadark:invert-0 col-start-1 row-start-1 text-center"
 						in:fly={{
 							duration,
 							easing: quintOut,

src/routes/+page.svelte

@@ -83,10 +83,12 @@
 
 <div class="[@media(max-height:768px)]:block mt-10 picker-fly">
 	<Uploader
-		isMobile={data.isMobile}
+		isMobile={data.isMobile || false}
 		bind:files={ourFiles}
 		onupload={runUpload}
-		acceptedFormats={[...new Set(converters.flatMap((c) => c.supportedFormats))]}
+		acceptedFormats={[
+			...new Set(converters.flatMap((c) => c.supportedFormats)),
+		]}
 	/>
 </div>
 

tailwind.config.ts

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