使用不同顏色主題區分本地 VSCode 與 Remote SSH 視窗

前言 🎨 方法一：使用不同的顏色主題 ✅ 設定步驟：📌 建議搭配：🛠️ 方法二：自訂 workbench.colorCustomizations ✅ 本地 VSCode 設定：✅ Remote SSH VSCode 設定範例：📁 如何設定 Remote 的 settings.json？🔍 建議區分的顏色區域 ✅ 小結

前言

在日常開發中，許多工程師會同時使用本地 VSCode 和透過 Remote SSH 連線的 VSCode 來操作遠端伺服器。若兩者介面相同，容易混淆，甚至可能在錯誤的環境中執行指令。本文將介紹如何透過設定不同的顏色主題或自訂 workbench.colorCustomizations，清楚區分本地與遠端 VSCode 視窗。

🎨 方法一：使用不同的顏色主題

VSCode 支援多種主題，最簡單的方式就是在本地與遠端使用不同的主題。

✅ 設定步驟：

開啟 VSCode。

按下 Ctrl + Shift + P，輸入 Preferences: Color Theme。

選擇一個主題（例如本地使用深色主題，遠端使用淺色主題）。

📌 建議搭配：

本地：One Dark Pro、Monokai、Dracula

遠端：Light+、Quiet Light、Solarized Light

🛠️ 方法二：自訂 `workbench.colorCustomizations`

若你偏好使用相同主題，但希望透過細部顏色區分，可以使用 workbench.colorCustomizations 來自訂 VSCode 的 UI 元件顏色。

✅ 本地 VSCode 設定：

可直接使用自選的主題的配置，只要改變遠端的設定即可。

✅ Remote SSH VSCode 設定範例：

JSON

json


{
	"workbench.colorCustomizations": {
		"titleBar.activeBackground": "#007acc", // Blue background when window is active
		"titleBar.activeForeground": "#ffffff", // White text when window is active
		"titleBar.inactiveBackground": "#005a9e", // Darker blue when window is inactive
		"titleBar.inactiveForeground": "#cccccc" // Light gray text when window is inactive
		}
}

📁 如何設定 Remote 的 `settings.json`？

開啟 Remote SSH session。

按下 Ctrl + Shift + P → 輸入 Preferences: Open Remote Settings (JSON)。

在遠端的 settings.json 中加入上述設定。

🔍 建議區分的顏色區域

除了標題列，你也可以自訂以下區域來加強辨識度：

區域	設定參數
標題列	`titleBar.activeBackground`
分頁列	`tab.activeBackground`, `tab.inactiveBackground`
側邊欄	`sideBar.background`
狀態列	`statusBar.background`, `statusBar.foreground`

✅ 小結

透過主題或自訂顏色設定，不僅能提升辨識度，也能降低操作錯誤的風險。這種技巧特別適合 DevOps、嵌入式開發、雲端部署等需要頻繁切換環境的工作流程。

前言