feat: add theme to terminal

backend/server/src/index.ts

@@ -224,10 +224,11 @@ io.on("connection", async (socket) => {
         containers[data.sandboxId],
         sendLoadedEvent
       )
-      await fileManagers[data.sandboxId].initialize()
       terminalManagers[data.sandboxId] = new TerminalManager(
         containers[data.sandboxId]
       )
+      console.log(`terminal manager set up for ${data.sandboxId}`)
+      await fileManagers[data.sandboxId].initialize()
     }
 
     const fileManager = fileManagers[data.sandboxId]
@@ -415,6 +416,12 @@ io.on("connection", async (socket) => {
     socket.on("createTerminal", async (id: string, callback) => {
       try {
         await lockManager.acquireLock(data.sandboxId, async () => {
+          let terminalManager = terminalManagers[data.sandboxId]
+          if (!terminalManager) {
+            terminalManager = terminalManagers[data.sandboxId] =
+              new TerminalManager(containers[data.sandboxId])
+          }
+
           await terminalManager.createTerminal(id, (responseString: string) => {
             socket.emit("terminalResponse", { id, data: responseString })
             const port = extractPortNumber(responseString)

frontend/components/editor/terminals/terminal.tsx

@@ -6,9 +6,9 @@ import "./xterm.css"
 
 import { debounce } from "@/lib/utils"
 import { Loader2 } from "lucide-react"
+import { useTheme } from "next-themes"
 import { ElementRef, useEffect, useRef } from "react"
 import { Socket } from "socket.io-client"
-
 export default function EditorTerminal({
   socket,
   id,
@@ -22,38 +22,17 @@ export default function EditorTerminal({
   setTerm: (term: Terminal) => void
   visible: boolean
 }) {
-  const terminalRef = useRef<ElementRef<"div">>(null)
+  const { theme } = useTheme()
+  const terminalContainerRef = useRef<ElementRef<"div">>(null)
   const fitAddonRef = useRef<FitAddon | null>(null)
 
   useEffect(() => {
-    if (!terminalRef.current) return
+    if (!terminalContainerRef.current) return
     // console.log("new terminal", id, term ? "reusing" : "creating");
 
     const terminal = new Terminal({
       cursorBlink: true,
-      theme: {
+      theme: theme === "light" ? lightTheme : darkTheme,
-        foreground: "#2e3436",
-        background: "#ffffff",
-        black: "#2e3436",
-        brightBlack: "#555753",
-        red: "#cc0000",
-        brightRed: "#ef2929",
-        green: "#4e9a06",
-        brightGreen: "#8ae234",
-        yellow: "#c4a000",
-        brightYellow: "#fce94f",
-        blue: "#3465a4",
-        brightBlue: "#729fcf",
-        magenta: "#75507b",
-        brightMagenta: "#ad7fa8",
-        cyan: "#06989a",
-        brightCyan: "#34e2e2",
-        white: "#d3d7cf",
-        brightWhite: "#eeeeec",
-        cursor: "#2e3436",
-        cursorAccent: "#ffffff",
-        selection: "rgba(52, 101, 164, 0.3)",
-      },
       fontFamily: "var(--font-geist-mono)",
       fontSize: 14,
       lineHeight: 1.5,
@@ -67,14 +46,20 @@ export default function EditorTerminal({
     return dispose
   }, [])
 
+  useEffect(() => {
+    if (term) {
+      term.options.theme = theme === "light" ? lightTheme : darkTheme
+    }
+  }, [theme])
+
   useEffect(() => {
     if (!term) return
 
-    if (!terminalRef.current) return
+    if (!terminalContainerRef.current) return
     if (!fitAddonRef.current) {
       const fitAddon = new FitAddon()
       term.loadAddon(fitAddon)
-      term.open(terminalRef.current)
+      term.open(terminalContainerRef.current)
       fitAddon.fit()
       fitAddonRef.current = fitAddon
     }
@@ -89,7 +74,7 @@ export default function EditorTerminal({
     })
     const resizeObserver = new ResizeObserver(
       debounce((entries) => {
-        if (!fitAddonRef.current || !terminalRef.current) return
+        if (!fitAddonRef.current || !terminalContainerRef.current) return
 
         const entry = entries[0]
         if (!entry) return
@@ -98,8 +83,8 @@ export default function EditorTerminal({
 
         // Only call fit if the size has actually changed
         if (
-          width !== terminalRef.current.offsetWidth ||
+          width !== terminalContainerRef.current.offsetWidth ||
-          height !== terminalRef.current.offsetHeight
+          height !== terminalContainerRef.current.offsetHeight
         ) {
           try {
             fitAddonRef.current.fit()
@@ -111,13 +96,13 @@ export default function EditorTerminal({
     )
 
     // start observing for resize
-    resizeObserver.observe(terminalRef.current)
+    resizeObserver.observe(terminalContainerRef.current)
     return () => {
       disposableOnData.dispose()
       disposableOnResize.dispose()
       resizeObserver.disconnect()
     }
-  }, [term, terminalRef.current])
+  }, [term, terminalContainerRef.current])
 
   useEffect(() => {
     if (!term) return
@@ -136,7 +121,7 @@ export default function EditorTerminal({
   return (
     <>
       <div
-        ref={terminalRef}
+        ref={terminalContainerRef}
         style={{ display: visible ? "block" : "none" }}
         className="w-full h-full text-left"
       >
@@ -150,3 +135,56 @@ export default function EditorTerminal({
     </>
   )
 }
+
+const lightTheme = {
+  foreground: "#2e3436",
+  background: "#ffffff",
+  black: "#2e3436",
+  brightBlack: "#555753",
+  red: "#cc0000",
+  brightRed: "#ef2929",
+  green: "#4e9a06",
+  brightGreen: "#8ae234",
+  yellow: "#c4a000",
+  brightYellow: "#fce94f",
+  blue: "#3465a4",
+  brightBlue: "#729fcf",
+  magenta: "#75507b",
+  brightMagenta: "#ad7fa8",
+  cyan: "#06989a",
+  brightCyan: "#34e2e2",
+  white: "#d3d7cf",
+  brightWhite: "#eeeeec",
+  cursor: "#2e3436",
+  cursorAccent: "#ffffff",
+  selectionBackground: "#3465a4",
+  selectionForeground: "#ffffff",
+  selectionInactiveBackground: "#264973",
+}
+
+// Dark Theme
+const darkTheme = {
+  foreground: "#f8f8f2",
+  background: "#0a0a0a",
+  black: "#21222c",
+  brightBlack: "#6272a4",
+  red: "#ff5555",
+  brightRed: "#ff6e6e",
+  green: "#50fa7b",
+  brightGreen: "#69ff94",
+  yellow: "#f1fa8c",
+  brightYellow: "#ffffa5",
+  blue: "#bd93f9",
+  brightBlue: "#d6acff",
+  magenta: "#ff79c6",
+  brightMagenta: "#ff92df",
+  cyan: "#8be9fd",
+  brightCyan: "#a4ffff",
+  white: "#f8f8f2",
+  brightWhite: "#ffffff",
+  cursor: "#f8f8f2",
+  cursorAccent: "#0a0a0a",
+  selectionBackground: "#264973",
+  selectionForeground: "#ffffff",
+  selectionInactiveBackground: "#1a3151",
+}

frontend/components/ui/tab.tsx

@@ -28,7 +28,7 @@ export default function Tab({
       variant={"secondary"}
       className={`font-normal select-none ${
         selected
-          ? "bg-neutral-700 hover:bg-neutral-600 text-foreground"
+          ? "bg-muted-foreground/50 hover:bg-muted-foreground/40 text-foreground"
           : "text-muted-foreground"
       }`}
     >