fix: update terminal container background when theme changes

- Apply terminal background color to container on mount
- Update container background when terminal theme changes in settings

Author: bajrangCoder

src/components/terminal/terminal.js

@@ -172,19 +172,28 @@ export default class TerminalComponent {
 
 					// Handle keyboard resize cursor positioning
 					const heightRatio = size.rows / originalRows;
-					if (heightRatio < 0.75 && this.terminal.buffer && this.terminal.buffer.active) {
+					if (
+						heightRatio < 0.75 &&
+						this.terminal.buffer &&
+						this.terminal.buffer.active
+					) {
 						// Keyboard resize detected - ensure cursor is visible
 						const buffer = this.terminal.buffer.active;
 						const cursorY = buffer.cursorY;
 						const cursorViewportPos = buffer.baseY + cursorY;
 						const viewportTop = buffer.viewportY;
 						const viewportBottom = viewportTop + this.terminal.rows - 1;
-						
-						if (cursorViewportPos <= viewportTop + 1 || cursorViewportPos >= viewportBottom - 1) {
-							const targetScroll = Math.max(0,
-								Math.min(buffer.length - this.terminal.rows,
-									cursorViewportPos - Math.floor(this.terminal.rows * 0.25)
-								)
+
+						if (
+							cursorViewportPos <= viewportTop + 1 ||
+							cursorViewportPos >= viewportBottom - 1
+						) {
+							const targetScroll = Math.max(
+								0,
+								Math.min(
+									buffer.length - this.terminal.rows,
+									cursorViewportPos - Math.floor(this.terminal.rows * 0.25),
+								),
 							);
 							this.terminal.scrollToLine(targetScroll);
 						}
@@ -474,6 +483,9 @@ export default class TerminalComponent {
 
 		this.container = container;
 
+		// Apply terminal background color to container to match theme
+		this.container.style.background = this.options.theme.background;
+
 		try {
 			try {
 				this.terminal.loadAddon(this.webglAddon);
@@ -701,16 +713,20 @@ export default class TerminalComponent {
 			const cursorViewportPos = buffer.baseY + cursorY;
 			const viewportTop = buffer.viewportY;
 			const viewportBottom = viewportTop + this.terminal.rows - 1;
-			
+
 			// Check if cursor is fully visible (with margin to prevent half-visibility)
-			const isCursorFullyVisible = cursorViewportPos >= viewportTop + 1 && cursorViewportPos <= viewportBottom - 2;
+			const isCursorFullyVisible =
+				cursorViewportPos >= viewportTop + 1 &&
+				cursorViewportPos <= viewportBottom - 2;
 
 			// If cursor is not fully visible, scroll to make it properly visible
 			if (!isCursorFullyVisible && buffer.length > this.terminal.rows) {
-				const targetScroll = Math.max(0, 
-					Math.min(buffer.length - this.terminal.rows,
-						cursorViewportPos - Math.floor(this.terminal.rows * 0.25)
-					)
+				const targetScroll = Math.max(
+					0,
+					Math.min(
+						buffer.length - this.terminal.rows,
+						cursorViewportPos - Math.floor(this.terminal.rows * 0.25),
+					),
 				);
 				this.terminal.scrollToLine(targetScroll);
 			}

src/components/terminal/terminalTouchSelection.js

@@ -277,9 +277,11 @@ export default class TerminalTouchSelection {
 		const horizontalDelta = touch.clientX - this.touchStartPos.x;
 
 		// Check if this looks like a back gesture (started near edge and moving horizontally inward)
-		if (this.isEdgeGesture(this.initialTouchPos) && 
-			Math.abs(horizontalDelta) > deltaY && 
-			deltaX > this.options.moveThreshold) {
+		if (
+			this.isEdgeGesture(this.initialTouchPos) &&
+			Math.abs(horizontalDelta) > deltaY &&
+			deltaX > this.options.moveThreshold
+		) {
 			// This looks like a back gesture, cancel selection
 			if (this.tapHoldTimeout) {
 				clearTimeout(this.tapHoldTimeout);
@@ -1165,17 +1167,17 @@ export default class TerminalTouchSelection {
 	isEdgeGesture(touch) {
 		const edgeThreshold = 30; // pixels from screen edge
 		const screenWidth = window.innerWidth;
-		
+
 		// Check if touch starts near left edge (most common for back gesture)
 		if (touch.clientX <= edgeThreshold) {
 			return true;
 		}
-		
+
 		// Check if touch starts near right edge (for RTL languages or right-handed back gesture)
 		if (touch.clientX >= screenWidth - edgeThreshold) {
 			return true;
 		}
-		
+
 		return false;
 	}
 

src/settings/terminalSettings.js

@@ -372,6 +372,11 @@ async function updateActiveTerminals(key, value) {
 				case "theme":
 					tab.terminalComponent.terminal.options.theme =
 						TerminalThemeManager.getTheme(value);
+					// Update container background to match new theme
+					if (tab.terminalComponent.container) {
+						tab.terminalComponent.container.style.background = 
+							tab.terminalComponent.terminal.options.theme.background;
+					}
 					break;
 				case "imageSupport":
 					tab.terminalComponent.updateImageSupport(value);