diff --git a/examples/api/src-tauri/src/lib.rs b/examples/api/src-tauri/src/lib.rs
index 35664137..d7f355b3 100644
--- a/examples/api/src-tauri/src/lib.rs
+++ b/examples/api/src-tauri/src/lib.rs
@@ -56,7 +56,7 @@ pub fn run() {
             #[cfg(desktop)]
             {
                 window_builder = window_builder
-                    .user_agent("Tauri API")
+                    .user_agent(&format!("Tauri API - {}", std::env::consts::OS))
                     .title("Tauri API Validation")
                     .inner_size(1000., 800.)
                     .min_inner_size(600., 400.)
diff --git a/examples/api/src/views/Window.svelte b/examples/api/src/views/Window.svelte
index 87fd7aa3..352ec7e2 100644
--- a/examples/api/src/views/Window.svelte
+++ b/examples/api/src/views/Window.svelte
@@ -60,8 +60,8 @@
   ];
 
   const windowsEffects = ["mica", "blur", "acrylic"];
-  const isWindows = navigator.appVersion.includes("Win");
-  const isMacOS = navigator.appVersion.includes("Mac");
+  const isWindows = navigator.appVersion.includes("windows");
+  const isMacOS = navigator.appVersion.includes("macos");
   let effectOptions = isWindows
     ? windowsEffects
     : Object.keys(Effect)
@@ -72,6 +72,7 @@
   );
 
   export let onMessage;
+  const mainEl = document.querySelector("main");
 
   let newWindowLabel;
 
@@ -210,12 +211,18 @@
     ) {
       payload.color = [effectR, effectG, effectB, effectA];
     }
+
+    mainEl.classList.remove("bg-primary");
+    mainEl.classList.remove("dark:bg-darkPrimary");
+    await windowMap[selectedWindow].clearEffects();
     await windowMap[selectedWindow].setEffects(payload);
   }
 
   async function clearEffects() {
     effects = [];
     await windowMap[selectedWindow].clearEffects();
+    mainEl.classList.add("bg-primary");
+    mainEl.classList.add("dark:bg-darkPrimary");
   }
 
   $: {