diff --git a/ui/src/components/TerminalPanel.tsx b/ui/src/components/TerminalPanel.tsx
index a55e3419fff71654fa999c95006ccaea69c83d44..173066b3c2bd0dbed88261682dd489dc427f17bd 100644
--- a/ui/src/components/TerminalPanel.tsx
+++ b/ui/src/components/TerminalPanel.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState, useCallback } from "react";
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { WebLinksAddon } from "@xterm/addon-web-links";
+import { isDarkModeActive } from "../services/theme";
 import "@xterm/xterm/css/xterm.css";
 
 function base64ToUint8Array(base64String: string): Uint8Array {
@@ -225,17 +226,15 @@ export default function TerminalPanel({
   const startHeightRef = useRef(0);
 
   // Detect dark mode
-  const [isDark, setIsDark] = useState(
-    document.documentElement.getAttribute("data-theme") === "dark",
-  );
+  const [isDark, setIsDark] = useState(isDarkModeActive);
 
   useEffect(() => {
     const observer = new MutationObserver(() => {
-      setIsDark(document.documentElement.getAttribute("data-theme") === "dark");
+      setIsDark(isDarkModeActive());
     });
     observer.observe(document.documentElement, {
       attributes: true,
-      attributeFilter: ["data-theme"],
+      attributeFilter: ["class"],
     });
     return () => observer.disconnect();
   }, []);
diff --git a/ui/src/styles.css b/ui/src/styles.css
index 3ec3f4470d41dde01d8aa931d5f021191a48ba10..44766ac1adf355954d501d838cc3e91644c19f8b 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -4995,4 +4995,5 @@ kbd {
 .terminal-panel-content > div {
   position: absolute;
   inset: 0;
+  padding: 8px 12px;
 }