adopt CSS variables in terminal

src/vs/workbench/contrib/terminal/browser/media/terminal.css

@@ -17,7 +17,9 @@
 .terminal-command-decoration.hide {
 	visibility: hidden;
 }
-
+.monaco-workbench .part.panel .pane-body.integrated-terminal .terminal-outer-container {
+	background-color: var(--vscode-terminal-background, --vscode-panel-background);
+}
 .monaco-workbench .pane-body.integrated-terminal .terminal-outer-container,
 .monaco-workbench .pane-body.integrated-terminal .terminal-groups-container,
 .monaco-workbench .pane-body.integrated-terminal .terminal-group,
@@ -26,7 +28,23 @@
 .monaco-workbench .editor-instance .terminal-outer-container {
 	height: 100%;
 }
+.monaco-workbench .part.sidebar .pane-body.integrated-terminal .terminal-outer-container,
+.monaco-workbench .part.auxiliarybar .pane-body.integrated-terminal .terminal-outer-container {
+	background-color: var(--vscode-terminal-background, --vscode-sideBar-background);
+}
+
+.monaco-workbench .pane-body.integrated-terminal .split-view-view:not(:first-child),
+.monaco-workbench .pane-body.integrated-terminal .tabs-container {
+	border-color: var(--vscode-terminal-border);
+}
+
+.monaco-workbench .pane-body.integrated-terminal .terminal-drop-overlay {
+	background-color: var(--vscode-terminal-dropBackground, --vscode-editorGroup-dropBackground);
+}
 
+.monaco-workbench .pane-body.integrated-terminal .terminal-tabs-entry.is-active::before {
+	background-color: var(--vscode-terminal-tab-activeBorder);
+}
 /* Override monaco's styles for terminal editors */
 .monaco-workbench .editor-instance .xterm textarea:focus {
 	opacity: 0 !important;
@@ -37,10 +55,14 @@
 	font-family: 'codicon' !important;
 	font-size: 16px !important;
 }
+
 .monaco-workbench .terminal-tab:not(.terminal-uri-icon)::before {
 	background-image: none !important;
 }
 
+.monaco-workbench .editor-instance .terminal-wrapper {
+	background-color: var(--vscode-terminal-background, --vscode-editorPane-background);
+}
 .monaco-workbench .editor-instance .terminal-wrapper,
 .monaco-workbench .pane-body.integrated-terminal .terminal-wrapper {
 	display: block;
@@ -431,10 +453,21 @@
 .terminal-command-decoration:not(.default):hover {
 	cursor: pointer;
 	border-radius: 5px;
+	background-color: var(--vscode-toolbar-hoverBackground);
+}
+.terminal-command-decoration {
+	color: var(--vscode-terminalCommandDecoration-successBackground);
+}
+.terminal-command-decoration.error {
+	color: var(--vscode-terminalCommandDecoration-errorBackground);
 }
-
 .terminal-command-decoration.default {
 	pointer-events: none;
+	color: var(--vscode-terminalCommandDecoration-defaultBackground);
+}
+.terminal-command-decoration.quick-fix {
+	color: var(--vscode-editorLightbulb-foreground);
+	background-color: var(--vscode-terminal-background, --vscode-panel-background);
 }
 
 .terminal-scroll-highlight {
@@ -448,6 +481,9 @@
 	border: 1px solid #ffffff;
 }
 
+.terminal-scroll-highlight {
+	border-color: var(--vscode-focusBorder);
+}
 .hc-black .xterm-find-result-decoration,
 .hc-light .xterm-find-result-decoration {
 	outline-style: dotted !important;
@@ -464,3 +500,45 @@
 	/* Ensure the active decoration is above the regular decoration */
 	z-index: 7 !important;
 }
+
+.monaco-workbench.hc-black .editor-instance .xterm.focus::before,
+.monaco-workbench.hc-black .pane-body.integrated-terminal .xterm.focus::before,
+.monaco-workbench.hc-black .editor-instance .xterm:focus::before,
+.monaco-workbench.hc-black .pane-body.integrated-terminal .xterm:focus::before,
+.monaco-workbench.hc-light .editor-instance .xterm.focus::before,
+.monaco-workbench.hc-light .pane-body.integrated-terminal .xterm.focus::before,
+.monaco-workbench.hc-light .editor-instance .xterm:focus::before,
+.monaco-workbench.hc-light .pane-body.integrated-terminal .xterm:focus::before {
+	border-color: var(--vscode-contrastActiveBorder);
+}
+
+.monaco-workbench .editor-instance .find-focused .xterm .xterm-viewport,
+.monaco-workbench .pane-body.integrated-terminal .find-focused .xterm .xterm-viewport,
+.monaco-workbench .editor-instance .xterm.focus .xterm-viewport,
+.monaco-workbench .pane-body.integrated-terminal .xterm.focus .xterm-viewport,
+.monaco-workbench .editor-instance .xterm:focus .xterm-viewport,
+.monaco-workbench .pane-body.integrated-terminal .xterm:focus .xterm-viewport,
+.monaco-workbench .editor-instance .xterm:hover .xterm-viewport,
+.monaco-workbench .pane-body.integrated-terminal .xterm:hover .xterm-viewport {
+	background-color: var(--vscode-scrollbarSlider-background) !important;
+}
+
+.monaco-workbench .editor-instance .xterm-viewport,
+.monaco-workbench .pane-body.integrated-terminal .xterm-viewport {
+	scrollbar-color: var(--vscode-scrollbarSlider-background) transparent;
+}
+
+.monaco-workbench .editor-instance .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover,
+.monaco-workbench .pane-body.integrated-terminal .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
+	background-color: var(--vscode-scrollbarSlider-hoverBackground);
+}
+
+.monaco-workbench .editor-instance .xterm-viewport:hover,
+.monaco-workbench .pane-body.integrated-terminal .xterm-viewport:hover {
+	scrollbar-color: var(--vscode-scrollbarSlider-hoverBackground) transparent;
+}
+
+.monaco-workbench .editor-instance .xterm .xterm-viewport::-webkit-scrollbar-thumb:active,
+.monaco-workbench .pane-body.integrated-terminal .xterm .xterm-viewport::-webkit-scrollbar-thumb:active {
+	background-color: var(--vscode-scrollbarSlider-activeBackground);
+}

src/vs/workbench/contrib/terminal/browser/terminalEditor.ts

@@ -15,7 +15,7 @@ import { IEditorOptions } from 'vs/platform/editor/common/editor';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IStorageService } from 'vs/platform/storage/common/storage';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
-import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { EditorPane } from 'vs/workbench/browser/parts/editor/editorPane';
 import { IEditorOpenContext } from 'vs/workbench/common/editor';
 import { ITerminalEditorService, ITerminalService, terminalEditorId } from 'vs/workbench/contrib/terminal/browser/terminal';
@@ -29,8 +29,6 @@ import { INotificationService } from 'vs/platform/notification/common/notificati
 import { openContextMenu } from 'vs/workbench/contrib/terminal/browser/terminalContextMenu';
 import { ACTIVE_GROUP } from 'vs/workbench/services/editor/common/editorService';
 import { IWorkbenchLayoutService, Parts } from 'vs/workbench/services/layout/browser/layoutService';
-import { TERMINAL_BACKGROUND_COLOR } from 'vs/workbench/contrib/terminal/common/terminalColorRegistry';
-import { EDITOR_PANE_BACKGROUND } from 'vs/workbench/common/theme';
 
 export class TerminalEditor extends EditorPane {
 
@@ -222,10 +220,3 @@ export class TerminalEditor extends EditorPane {
 		return defaultProfileName!;
 	}
 }
-
-registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
-	const backgroundColor = theme.getColor(TERMINAL_BACKGROUND_COLOR) || theme.getColor(EDITOR_PANE_BACKGROUND);
-	if (backgroundColor) {
-		collector.addRule(`.monaco-workbench .editor-instance .terminal-wrapper { background-color: ${backgroundColor.toString()}; }`);
-	}
-});

src/vs/workbench/contrib/terminal/browser/terminalInstance.ts

@@ -50,9 +50,8 @@ import { TerminalCapabilityStoreMultiplexer } from 'vs/platform/terminal/common/
 import { IProcessDataEvent, IProcessPropertyMap, IReconnectionProperties, IShellLaunchConfig, ITerminalDimensionsOverride, ITerminalLaunchError, PosixShellType, ProcessPropertyType, ShellIntegrationStatus, TerminalExitReason, TerminalIcon, TerminalLocation, TerminalSettingId, TerminalShellType, TitleEventSource, WindowsShellType } from 'vs/platform/terminal/common/terminal';
 import { escapeNonWindowsPath } from 'vs/platform/terminal/common/terminalEnvironment';
 import { formatMessageForTerminal } from 'vs/platform/terminal/common/terminalStrings';
-import { activeContrastBorder, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground } from 'vs/platform/theme/common/colorRegistry';
 import { getIconRegistry } from 'vs/platform/theme/common/iconRegistry';
-import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { IWorkspaceContextService, IWorkspaceFolder } from 'vs/platform/workspace/common/workspace';
 import { IWorkspaceTrustRequestService } from 'vs/platform/workspace/common/workspaceTrust';
 import { IViewDescriptorService, IViewsService, ViewContainerLocation } from 'vs/workbench/common/views';
@@ -2452,58 +2451,6 @@ class TerminalInstanceDragAndDropController extends Disposable implements dom.ID
 	}
 }
 
-registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
-	// Border
-	const border = theme.getColor(activeContrastBorder);
-	if (border) {
-		collector.addRule(`
-			.monaco-workbench.hc-black .editor-instance .xterm.focus::before,
-			.monaco-workbench.hc-black .pane-body.integrated-terminal .xterm.focus::before,
-			.monaco-workbench.hc-black .editor-instance .xterm:focus::before,
-			.monaco-workbench.hc-black .pane-body.integrated-terminal .xterm:focus::before,
-			.monaco-workbench.hc-light .editor-instance .xterm.focus::before,
-			.monaco-workbench.hc-light .pane-body.integrated-terminal .xterm.focus::before,
-			.monaco-workbench.hc-light .editor-instance .xterm:focus::before,
-			.monaco-workbench.hc-light .pane-body.integrated-terminal .xterm:focus::before { border-color: ${border}; }`
-		);
-	}
-
-	// Scrollbar
-	const scrollbarSliderBackgroundColor = theme.getColor(scrollbarSliderBackground);
-	if (scrollbarSliderBackgroundColor) {
-		collector.addRule(`
-			.monaco-workbench .editor-instance .find-focused .xterm .xterm-viewport,
-			.monaco-workbench .pane-body.integrated-terminal .find-focused .xterm .xterm-viewport,
-			.monaco-workbench .editor-instance .xterm.focus .xterm-viewport,
-			.monaco-workbench .pane-body.integrated-terminal .xterm.focus .xterm-viewport,
-			.monaco-workbench .editor-instance .xterm:focus .xterm-viewport,
-			.monaco-workbench .pane-body.integrated-terminal .xterm:focus .xterm-viewport,
-			.monaco-workbench .editor-instance .xterm:hover .xterm-viewport,
-			.monaco-workbench .pane-body.integrated-terminal .xterm:hover .xterm-viewport { background-color: ${scrollbarSliderBackgroundColor} !important; }
-			.monaco-workbench .editor-instance .xterm-viewport,
-			.monaco-workbench .pane-body.integrated-terminal .xterm-viewport { scrollbar-color: ${scrollbarSliderBackgroundColor} transparent; }
-		`);
-	}
-
-	const scrollbarSliderHoverBackgroundColor = theme.getColor(scrollbarSliderHoverBackground);
-	if (scrollbarSliderHoverBackgroundColor) {
-		collector.addRule(`
-			.monaco-workbench .editor-instance .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover,
-			.monaco-workbench .pane-body.integrated-terminal .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover { background-color: ${scrollbarSliderHoverBackgroundColor}; }
-			.monaco-workbench .editor-instance .xterm-viewport:hover,
-			.monaco-workbench .pane-body.integrated-terminal .xterm-viewport:hover { scrollbar-color: ${scrollbarSliderHoverBackgroundColor} transparent; }
-		`);
-	}
-
-	const scrollbarSliderActiveBackgroundColor = theme.getColor(scrollbarSliderActiveBackground);
-	if (scrollbarSliderActiveBackgroundColor) {
-		collector.addRule(`
-			.monaco-workbench .editor-instance .xterm .xterm-viewport::-webkit-scrollbar-thumb:active,
-			.monaco-workbench .pane-body.integrated-terminal .xterm .xterm-viewport::-webkit-scrollbar-thumb:active { background-color: ${scrollbarSliderActiveBackgroundColor}; }
-		`);
-	}
-});
-
 interface ITerminalLabelTemplateProperties {
 	cwd?: string | null | undefined;
 	cwdFolder?: string | null | undefined;

src/vs/workbench/contrib/terminal/browser/terminalView.ts

@@ -10,17 +10,15 @@ import { IConfigurationService } from 'vs/platform/configuration/common/configur
 import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
-import { IThemeService, IColorTheme, registerThemingParticipant, ICssStyleCollector, ThemeIcon, Themable } from 'vs/platform/theme/common/themeService';
+import { IThemeService, ThemeIcon, Themable } from 'vs/platform/theme/common/themeService';
 import { switchTerminalActionViewItemSeparator, switchTerminalShowTabsTitle } from 'vs/workbench/contrib/terminal/browser/terminalActions';
-import { TERMINAL_BACKGROUND_COLOR, TERMINAL_BORDER_COLOR, TERMINAL_DRAG_AND_DROP_BACKGROUND, TERMINAL_TAB_ACTIVE_BORDER } from 'vs/workbench/contrib/terminal/common/terminalColorRegistry';
 import { INotificationService, IPromptChoice, Severity } from 'vs/platform/notification/common/notification';
 import { ICreateTerminalOptions, ITerminalGroupService, ITerminalInstance, ITerminalService, TerminalConnectionState, TerminalDataTransfers } from 'vs/workbench/contrib/terminal/browser/terminal';
 import { ViewPane, IViewPaneOptions } from 'vs/workbench/browser/parts/views/viewPane';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IViewDescriptorService } from 'vs/workbench/common/views';
 import { IOpenerService } from 'vs/platform/opener/common/opener';
-import { PANEL_BACKGROUND, SIDE_BAR_BACKGROUND, EDITOR_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme';
 import { IMenu, IMenuService, MenuId, MenuItemAction } from 'vs/platform/actions/common/actions';
 import { ITerminalProfileResolverService, ITerminalProfileService, TerminalCommandId } from 'vs/workbench/contrib/terminal/common/terminal';
 import { TerminalSettingId, ITerminalProfile, TerminalLocation } from 'vs/platform/terminal/common/terminal';
@@ -286,36 +284,6 @@ export class TerminalViewPane extends ViewPane {
 	}
 }
 
-registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
-	const panelBackgroundColor = theme.getColor(TERMINAL_BACKGROUND_COLOR) || theme.getColor(PANEL_BACKGROUND);
-	if (panelBackgroundColor) {
-		collector.addRule(`.monaco-workbench .part.panel .pane-body.integrated-terminal .terminal-outer-container { background-color: ${panelBackgroundColor.toString()}; }`);
-	}
-
-	const sidebarBackgroundColor = theme.getColor(TERMINAL_BACKGROUND_COLOR) || theme.getColor(SIDE_BAR_BACKGROUND);
-	if (sidebarBackgroundColor) {
-		collector.addRule(`.monaco-workbench .part.sidebar .pane-body.integrated-terminal .terminal-outer-container { background-color: ${sidebarBackgroundColor.toString()}; }`);
-		collector.addRule(`.monaco-workbench .part.auxiliarybar .pane-body.integrated-terminal .terminal-outer-container { background-color: ${sidebarBackgroundColor.toString()}; }`);
-	}
-
-	const borderColor = theme.getColor(TERMINAL_BORDER_COLOR);
-	if (borderColor) {
-		collector.addRule(`.monaco-workbench .pane-body.integrated-terminal .split-view-view:not(:first-child) { border-color: ${borderColor.toString()}; }`);
-		collector.addRule(`.monaco-workbench .pane-body.integrated-terminal .tabs-container { border-color: ${borderColor.toString()}; }`);
-	}
-
-	const dndBackgroundColor = theme.getColor(TERMINAL_DRAG_AND_DROP_BACKGROUND) || theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND);
-	if (dndBackgroundColor) {
-		collector.addRule(`.monaco-workbench .pane-body.integrated-terminal .terminal-drop-overlay { background-color: ${dndBackgroundColor.toString()}; }`);
-	}
-
-	const activeTabBorderColor = theme.getColor(TERMINAL_TAB_ACTIVE_BORDER);
-	if (activeTabBorderColor) {
-		collector.addRule(`.monaco-workbench .pane-body.integrated-terminal .terminal-tabs-entry.is-active::before { background-color: ${activeTabBorderColor.toString()}; }`);
-	}
-});
-
-
 class SwitchTerminalActionViewItem extends SelectActionViewItem {
 	constructor(
 		action: IAction,

src/vs/workbench/contrib/terminal/browser/xterm/decorationAddon.ts

@@ -17,8 +17,7 @@ import { IOpenerService } from 'vs/platform/opener/common/opener';
 import { IQuickInputService, IQuickPickItem } from 'vs/platform/quickinput/common/quickInput';
 import { CommandInvalidationReason, ICommandDetectionCapability, IMarkProperties, ITerminalCapabilityStore, TerminalCapability } from 'vs/platform/terminal/common/capabilities/capabilities';
 import { TerminalSettingId } from 'vs/platform/terminal/common/terminal';
-import { toolbarHoverBackground } from 'vs/platform/theme/common/colorRegistry';
-import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant, ThemeIcon } from 'vs/platform/theme/common/themeService';
+import { IColorTheme, IThemeService, registerThemingParticipant, ThemeIcon } from 'vs/platform/theme/common/themeService';
 import { TaskSettingId } from 'vs/workbench/contrib/tasks/common/tasks';
 import { terminalDecorationError, terminalDecorationIncomplete, terminalDecorationMark, terminalDecorationSuccess } from 'vs/workbench/contrib/terminal/browser/terminalIcons';
 import { DecorationSelector, TerminalDecorationHoverManager, updateLayout } from 'vs/workbench/contrib/terminal/browser/xterm/decorationStyles';
@@ -460,22 +459,8 @@ export class DecorationAddon extends Disposable implements ITerminalAddon {
 let successColor: string | Color | undefined;
 let errorColor: string | Color | undefined;
 let defaultColor: string | Color | undefined;
-registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
+registerThemingParticipant((theme: IColorTheme) => {
 	successColor = theme.getColor(TERMINAL_COMMAND_DECORATION_SUCCESS_BACKGROUND_COLOR);
 	errorColor = theme.getColor(TERMINAL_COMMAND_DECORATION_ERROR_BACKGROUND_COLOR);
 	defaultColor = theme.getColor(TERMINAL_COMMAND_DECORATION_DEFAULT_BACKGROUND_COLOR);
-	const hoverBackgroundColor = theme.getColor(toolbarHoverBackground);
-
-	if (successColor) {
-		collector.addRule(`.${DecorationSelector.CommandDecoration} { color: ${successColor.toString()}; } `);
-	}
-	if (errorColor) {
-		collector.addRule(`.${DecorationSelector.CommandDecoration}.${DecorationSelector.ErrorColor} { color: ${errorColor.toString()}; } `);
-	}
-	if (defaultColor) {
-		collector.addRule(`.${DecorationSelector.CommandDecoration}.${DecorationSelector.DefaultColor} { color: ${defaultColor.toString()};} `);
-	}
-	if (hoverBackgroundColor) {
-		collector.addRule(`.${DecorationSelector.CommandDecoration}:not(.${DecorationSelector.DefaultColor}):hover { background-color: ${hoverBackgroundColor.toString()}; }`);
-	}
 });

src/vs/workbench/contrib/terminal/browser/xterm/markNavigationAddon.ts

@@ -9,8 +9,7 @@ import { IMarkTracker } from 'vs/workbench/contrib/terminal/browser/terminal';
 import { ITerminalCapabilityStore, TerminalCapability } from 'vs/platform/terminal/common/capabilities/capabilities';
 import type { Terminal, IMarker, ITerminalAddon, IDecoration } from 'xterm';
 import { timeout } from 'vs/base/common/async';
-import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
-import { focusBorder } from 'vs/platform/theme/common/colorRegistry';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { TERMINAL_OVERVIEW_RULER_CURSOR_FOREGROUND_COLOR } from 'vs/workbench/contrib/terminal/common/terminalColorRegistry';
 
 enum Boundary {
@@ -437,14 +436,6 @@ export class MarkNavigationAddon extends Disposable implements IMarkTracker, ITe
 	}
 }
 
-registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
-	const focusBorderColor = theme.getColor(focusBorder);
-
-	if (focusBorderColor) {
-		collector.addRule(`.terminal-scroll-highlight { border-color: ${focusBorderColor.toString()}; } `);
-	}
-});
-
 export function getLine(xterm: Terminal, marker: IMarker | Boundary): number {
 	// Use the _second last_ row as the last row is likely the prompt
 	if (marker === Boundary.Bottom) {