fix: adjust color paste on terminal

apps/dokploy/components/dashboard/settings/web-server/terminal.tsx

@@ -6,6 +6,7 @@ import "@xterm/xterm/css/xterm.css";
 import { AttachAddon } from "@xterm/addon-attach";
 import { useTheme } from "next-themes";
 import { getLocalServerData } from "./local-server-config";
+import { ClipboardAddon } from "@xterm/addon-clipboard";
 
 interface Props {
 	id: string;
@@ -32,15 +33,15 @@ export const Terminal: React.FC<Props> = ({ id, serverId }) => {
 			lineHeight: 1.4,
 			convertEol: true,
 			theme: {
-				cursor: resolvedTheme === "light" ? "#000000" : "#FFFFFF",
+				cursor: resolvedTheme === "light" ? "#000000" : "transparent",
-				background: resolvedTheme === "light" ? "#FFFFFF" : "rgba(0, 0, 0, 0.9)",
+				background: "rgba(0, 0, 0, 0)",
-				foreground: resolvedTheme === "light" ? "#000000" : "#FFFFFF",
+				foreground: "currentColor",
-				selectionForeground: resolvedTheme === "light" ? "#000000" : "#FFFFFF",
 			},
 			allowTransparency: true,
 			screenReaderMode: true,
 			scrollback: 1000,
 		});
+
 		const addonFit = new FitAddon();
 
 		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
@@ -58,6 +59,8 @@ export const Terminal: React.FC<Props> = ({ id, serverId }) => {
 
 		const ws = new WebSocket(wsUrl);
 		const addonAttach = new AttachAddon(ws);
+		const clipboardAddon = new ClipboardAddon();
+		term.loadAddon(clipboardAddon);
 
 		// @ts-ignore
 		term.open(termRef.current);

apps/dokploy/package.json

@@ -75,6 +75,7 @@
 		"@uiw/react-codemirror": "^4.22.1",
 		"@xterm/addon-attach": "0.10.0",
 		"@xterm/xterm": "^5.4.0",
+		"@xterm/addon-clipboard": "0.1.0",
 		"adm-zip": "^0.5.14",
 		"bcrypt": "5.1.1",
 		"bullmq": "5.4.2",

apps/dokploy/styles/globals.css

@@ -4,6 +4,7 @@
 
 @layer base {
   :root {
+    --terminal-paste: rgba(0, 0, 0, 0.2);
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
 
@@ -51,6 +52,7 @@
   }
 
   .dark {
+    --terminal-paste: rgba(255, 255, 255, 0.2);
     --background: 0 0% 0%;
     --foreground: 0 0% 98%;
 
@@ -235,3 +237,8 @@
     background-color: hsl(var(--muted-foreground) / 0.5);
   }
 }
+
+.xterm-bg-257.xterm-fg-257 {
+  background-color: var(--terminal-paste) !important;
+  color: currentColor !important;
+}

pnpm-lock.yaml

@@ -217,6 +217,9 @@ importers:
       '@xterm/addon-attach':
         specifier: 0.10.0
         version: 0.10.0(@xterm/xterm@5.5.0)
+      '@xterm/addon-clipboard':
+        specifier: 0.1.0
+        version: 0.1.0(@xterm/xterm@5.5.0)
       '@xterm/xterm':
         specifier: ^5.4.0
         version: 5.5.0
@@ -3503,6 +3506,11 @@ packages:
     peerDependencies:
       '@xterm/xterm': ^5.0.0
 
+  '@xterm/addon-clipboard@0.1.0':
+    resolution: {integrity: sha512-zdoM7p53T5sv/HbRTyp4hY0kKmEQ3MZvAvEtiXqNIHc/JdpqwByCtsTaQF5DX2n4hYdXRPO4P/eOS0QEhX1nPw==}
+    peerDependencies:
+      '@xterm/xterm': ^5.4.0
+
   '@xterm/xterm@5.5.0':
     resolution: {integrity: sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==}
 
@@ -5011,6 +5019,9 @@ packages:
     resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
     engines: {node: '>=10'}
 
+  js-base64@3.7.7:
+    resolution: {integrity: sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==}
+
   js-beautify@1.15.1:
     resolution: {integrity: sha512-ESjNzSlt/sWE8sciZH8kBF8BPlwXPwhR6pWKAw8bw4Bwj+iZcnKW6ONWUutJ7eObuBZQpiIb8S7OYspWrKt7rA==}
     engines: {node: '>=14'}
@@ -9894,6 +9905,11 @@ snapshots:
     dependencies:
       '@xterm/xterm': 5.5.0
 
+  '@xterm/addon-clipboard@0.1.0(@xterm/xterm@5.5.0)':
+    dependencies:
+      '@xterm/xterm': 5.5.0
+      js-base64: 3.7.7
+
   '@xterm/xterm@5.5.0': {}
 
   '@xtuc/ieee754@1.2.0': {}
@@ -11410,6 +11426,8 @@ snapshots:
 
   joycon@3.1.1: {}
 
+  js-base64@3.7.7: {}
+
   js-beautify@1.15.1:
     dependencies:
       config-chain: 1.1.13