diff --git a/examples/api/index.html b/examples/api/index.html
index 655165ea0..2cd1bfe5f 100644
--- a/examples/api/index.html
+++ b/examples/api/index.html
@@ -1,12 +1,13 @@
 <!doctype html>
-<html lang="en" theme="dark">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=0"
     />
-    <title>Svelte + Vite App</title>
+    <meta name="color-scheme" content="dark light" />
+    <title>API Example App</title>
   </head>
 
   <body>
diff --git a/examples/api/src/App.svelte b/examples/api/src/App.svelte
index 3d9f4987a..00b914810 100644
--- a/examples/api/src/App.svelte
+++ b/examples/api/src/App.svelte
@@ -186,9 +186,13 @@
 
   function applyTheme() {
     const isDark = theme === 'auto' ? preferDark.current : theme === 'dark'
-    isDark
-      ? document.documentElement.classList.add('dark')
-      : document.documentElement.classList.remove('dark')
+    if (isDark) {
+      document.documentElement.classList.add('dark')
+      document.documentElement.classList.remove('light')
+    } else {
+      document.documentElement.classList.remove('dark')
+      document.documentElement.classList.add('light')
+    }
     setTheme(theme === 'auto' ? null : theme)
     localStorage.setItem('theme', theme)
   }
@@ -331,7 +335,7 @@
   id="sidebarToggle"
   bind:this={sidebarToggle}
   class="z-2000 hidden lt-sm:flex justify-center absolute items-center w-8 h-8 rd-8
-            bg-accent dark:bg-darkAccent active:bg-accentDark dark:active:bg-darkAccentDark"
+            bg-accent dark:bg-darkAccent active:bg-accentDark dark:active:bg-darkAccentDark text-accentText dark:text-darkAccentText"
 >
   {#if isSideBarOpen}
     <span class="i-codicon-close animate-duration-300ms animate-fade-in"></span>
@@ -397,9 +401,7 @@
     <br />
     <div class="bg-white/5 h-2px"></div>
     <br />
-    <div
-      class="flex flex-col overflow-y-auto children-flex-none gap-1"
-    >
+    <div class="flex flex-col overflow-y-auto children-flex-none gap-1">
       {#each views as view}
         <a
           href="##"
diff --git a/examples/api/src/app.css b/examples/api/src/app.css
index 20df36aa1..f411d6e97 100644
--- a/examples/api/src/app.css
+++ b/examples/api/src/app.css
@@ -2,6 +2,13 @@
   line-height: 1.5;
 }
 
+:root.dark {
+  color-scheme: dark;
+}
+:root.light {
+  color-scheme: light;
+}
+
 *:not(h1, h2, h3, h4, h5, h6) {
   margin: 0;
   padding: 0;
