diff --git a/packages/repl/index.html b/packages/repl/index.html
index bbe7a10..1efbb71 100644
--- a/packages/repl/index.html
+++ b/packages/repl/index.html
@@ -8,6 +8,12 @@
     <script defer src="https://zond.tei.su/script.js" data-website-id="e1726072-b61b-49ab-a4ee-decb8e6740be"></script>
   </head>
   <body>
+    <script>
+      const theme = localStorage.getItem('kb-color-mode')
+      if (theme === 'dark' || ((!theme || theme === 'system') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.style.colorScheme = 'dark'
+      }
+    </script>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
   </body>
diff --git a/packages/repl/src/components/runner/Devtools.tsx b/packages/repl/src/components/runner/Devtools.tsx
index 3db33a8..0782ac0 100644
--- a/packages/repl/src/components/runner/Devtools.tsx
+++ b/packages/repl/src/components/runner/Devtools.tsx
@@ -1,3 +1,4 @@
+import { useColorMode } from '@kobalte/core'
 import { createEffect, createSignal, onCleanup } from 'solid-js'
 import { cn } from '../../lib/utils.ts'
 
@@ -10,6 +11,11 @@ const HTML = `
   <script src="https://unpkg.com/@ungap/custom-elements/es.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/chii@1.12.3/public/front_end/entrypoints/chii_app/chii_app.js"></script>
   <body class="undocked" id="-blink-dev-tools">
+  <script>
+    if (window.location.hash.includes('dark=true')) {
+      document.documentElement.style.colorScheme = 'dark'
+    }
+  </script>
   <style id="inject-css">
     :root {
       --sys-color-base-container: hsl(0 0% 100%);
@@ -88,6 +94,8 @@ export function Devtools(props: {
 }) {
   const [innerRef, setInnerRef] = createSignal<HTMLIFrameElement | undefined>()
 
+  const { colorMode } = useColorMode()
+
   const url = URL.createObjectURL(new Blob([HTML], { type: 'text/html' }))
   onCleanup(() => URL.revokeObjectURL(url))
 
@@ -110,7 +118,7 @@ export function Devtools(props: {
     <div class={cn('relative', props.class)}>
       <iframe
         ref={setInnerRef}
-        src={`${url}#?embedded=${encodeURIComponent(location.origin)}`}
+        src={`${url}#?embedded=${encodeURIComponent(location.origin)}&dark=${colorMode() === 'dark'}`}
         title="Devtools"
         class="absolute inset-0 block size-full"
         onLoad={handleLoad}
