Use selection.background for the terminal

The new selection model in xterm.js doesn't allow inverting colors
right now so piggyback on selection.background. Ideally the terminal
would have its own selection key since it has a terminal.background,
but this is hopefully just temporary until selection color inverting
is done upstream.

src/vs/platform/theme/common/colorRegistry.ts

@@ -137,7 +137,7 @@ export const focusBorder = registerColor('focusBorder', { dark: Color.fromHex('#
 export const contrastBorder = registerColor('contrastBorder', { light: null, dark: null, hc: '#6FC3DF' }, nls.localize('contrastBorder', "An extra border around elements to separate them from others for greater contrast."));
 export const activeContrastBorder = registerColor('contrastActiveBorder', { light: null, dark: null, hc: focusBorder }, nls.localize('activeContrastBorder', "An extra border around active elements to separate them from others for greater contrast."));
 
-export const selectionBackground = registerColor('selection.background', { light: null, dark: null, hc: null }, nls.localize('selectionBackground', "The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor and the terminal."));
+export const selectionBackground = registerColor('selection.background', { light: null, dark: null, hc: null }, nls.localize('selectionBackground', "The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor."));
 
 // ------ text colors
 

src/vs/workbench/parts/terminal/electron-browser/media/xterm.css

@@ -140,7 +140,7 @@
 
 .monaco-workbench .panel.integrated-terminal .xterm .xterm-selection div {
 	position: absolute;
-	background-color: #555;
+	opacity: 0.5;
 }
 
 .monaco-workbench .panel.integrated-terminal .xterm .xterm-bold {
@@ -174,23 +174,6 @@
 	display: block;
 }
 
-/* Base selection colors */
-
-.monaco-workbench .panel.integrated-terminal .xterm ::selection {
-	color: #FFF;
-	background-color: rgba(51, 51, 51, 0.996);
-}
-
-.vs-dark .monaco-workbench .panel.integrated-terminal .xterm ::selection {
-	color: #1e1e1e;
-	background-color: rgba(204, 204, 204, 0.996);
-}
-
-.hc-black .monaco-workbench .panel.integrated-terminal .xterm ::selection {
-	color: #000;
-	background-color: rgba(255, 255, 255, 0.996);
-}
-
 /* Terminal colors 16-255 */
 
 .monaco-workbench .panel.integrated-terminal .xterm .xterm-color-16 {

src/vs/workbench/parts/terminal/electron-browser/terminalPanel.ts

@@ -16,7 +16,7 @@ import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { ITerminalService, ITerminalFont, TERMINAL_PANEL_ID } from 'vs/workbench/parts/terminal/common/terminal';
 import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
 import { ansiColorIdentifiers, TERMINAL_BACKGROUND_COLOR, TERMINAL_FOREGROUND_COLOR } from './terminalColorRegistry';
-import { ColorIdentifier } from 'vs/platform/theme/common/colorRegistry';
+import { ColorIdentifier, selectionBackground } from 'vs/platform/theme/common/colorRegistry';
 import { KillTerminalAction, CreateNewTerminalAction, SwitchTerminalInstanceAction, SwitchTerminalInstanceActionItem, CopyTerminalSelectionAction, TerminalPasteAction, ClearTerminalAction } from 'vs/workbench/parts/terminal/electron-browser/terminalActions';
 import { Panel } from 'vs/workbench/browser/panel';
 import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
@@ -262,6 +262,12 @@ export class TerminalPanel extends Panel {
 				`.monaco-workbench .panel.integrated-terminal .xterm.xterm-cursor-style-bar.focus.xterm-cursor-blink .terminal-cursor::before,` +
 				`.monaco-workbench .panel.integrated-terminal .xterm.xterm-cursor-style-underline.focus.xterm-cursor-blink .terminal-cursor::before { background-color: ${fgColor}; }`;
 		}
+		// Use selection.background as the terminal selection, this is temporary
+		// until proper color inverting is implemented to ensure contrast.
+		const selectionColor = theme.getColor(selectionBackground);
+		if (selectionColor) {
+			css += `.monaco-workbench .panel.integrated-terminal .xterm .xterm-selection div { background-color: ${selectionColor}; }`;
+		}
 
 		this._themeStyleElement.innerHTML = css;
 	}