fix: make background opaque on linux

src/App.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" context="module">
-    import { isWindows10 } from "./detectWindows10.js";
-    const windows10 = isWindows10();
+    import { requiresOpaqueBackground } from "./detectTransparencySupport.js";
+    const opaque = requiresOpaqueBackground();
 </script>
 
 <script lang="ts">
@@ -46,14 +46,14 @@
     }
 
     onMount(() => {
-        windows10.then((isWindows10) => {
-            if (isWindows10) {
-                document.body.classList.add("windows10");
+        opaque.then((opaque) => {
+            if (opaque) {
+                document.body.classList.add("opaque");
             }
         });
 
         return () => {
-            document.body.classList.remove("windows10");
+            document.body.classList.remove("opaque");
         };
     });
 </script>

src/detectWindows10.js → src/detectTransparencySupport.js

@@ -23,3 +23,19 @@ export async function isWindows10() {
         return false;
     }
 }
+
+export function isLinux() {
+    return navigator.platform.includes("Linux");
+}
+
+export async function requiresOpaqueBackground() {
+    if (isLinux()) {
+        return true;
+    }
+
+    if (await isWindows10()) {
+        return true;
+    }
+
+    return false;
+}

src/styles.scss

@@ -74,6 +74,6 @@ progress:indeterminate::-webkit-progress-value {
     color-scheme: dark;
 }
 
-.windows10 {
+.opaque {
     @apply bg-neutral-300 dark:bg-stone-900;
 }