diff --git a/src/vs/base/browser/ui/list/listWidget.ts b/src/vs/base/browser/ui/list/listWidget.ts index 29795a31b9897261dc086eefdc1ac039478b7765..5643cc768a96dffdd13169a21d0dac535b6a7a2f 100644 --- a/src/vs/base/browser/ui/list/listWidget.ts +++ b/src/vs/base/browser/ui/list/listWidget.ts @@ -405,6 +405,7 @@ export interface IListOptions extends IListViewOptions, IMouseControllerOptio export interface IListStyles { listFocusBackground?: Color; + listFocusForeground?: Color; listActiveSelectionBackground?: Color; listActiveSelectionForeground?: Color; listFocusAndSelectionBackground?: Color; @@ -413,6 +414,7 @@ export interface IListStyles { listInactiveSelectionForeground?: Color; listInactiveFocusBackground?: Color; listHoverBackground?: Color; + listHoverForeground?: Color; listDropBackground?: Color; listFocusOutline?: Color; listInactiveFocusOutline?: Color; @@ -818,6 +820,10 @@ export class List implements ISpliceable, IDisposable { content.push(`.monaco-list.${this.idPrefix}:focus .monaco-list-row.focused { background-color: ${styles.listFocusBackground}; }`); } + if (styles.listFocusForeground) { + content.push(`.monaco-list.${this.idPrefix}:focus .monaco-list-row.focused { color: ${styles.listFocusForeground}; }`); + } + if (styles.listActiveSelectionBackground) { content.push(`.monaco-list.${this.idPrefix}:focus .monaco-list-row.selected { background-color: ${styles.listActiveSelectionBackground}; }`); content.push(`.monaco-list.${this.idPrefix}:focus .monaco-list-row.selected:hover { background-color: ${styles.listActiveSelectionBackground}; }`); // overwrite :hover style in this case! @@ -853,6 +859,10 @@ export class List implements ISpliceable, IDisposable { content.push(`.monaco-list.${this.idPrefix} .monaco-list-row:hover { background-color: ${styles.listHoverBackground}; }`); } + if (styles.listHoverForeground) { + content.push(`.monaco-list.${this.idPrefix} .monaco-list-row:hover { color: ${styles.listHoverForeground}; }`); + } + if (styles.listSelectionOutline) { content.push(`.monaco-list.${this.idPrefix} .monaco-list-row.selected { outline: 1px dotted ${styles.listSelectionOutline}; }`); } diff --git a/src/vs/base/parts/tree/browser/tree.ts b/src/vs/base/parts/tree/browser/tree.ts index 0d253f2b083024d019377cdfe617cee7dfb2d3e4..07943806dc2e72740cc734684f412db9b6909935 100644 --- a/src/vs/base/parts/tree/browser/tree.ts +++ b/src/vs/base/parts/tree/browser/tree.ts @@ -665,6 +665,7 @@ export interface ITreeOptions extends ITreeStyles { export interface ITreeStyles { listFocusBackground?: Color; + listFocusForeground?: Color; listActiveSelectionBackground?: Color; listActiveSelectionForeground?: Color; listFocusAndSelectionBackground?: Color; @@ -672,6 +673,7 @@ export interface ITreeStyles { listInactiveSelectionBackground?: Color; listInactiveSelectionForeground?: Color; listHoverBackground?: Color; + listHoverForeground?: Color; listDropBackground?: Color; listFocusOutline?: Color; } diff --git a/src/vs/base/parts/tree/browser/treeView.ts b/src/vs/base/parts/tree/browser/treeView.ts index 5d40c9cd3d6fc981d28f386d5e7afb6420dbd13d..0836cf0bbecbb595fc42040a1b6d13de3577ca64 100644 --- a/src/vs/base/parts/tree/browser/treeView.ts +++ b/src/vs/base/parts/tree/browser/treeView.ts @@ -561,6 +561,10 @@ export class TreeView extends HeightMap { content.push(`.monaco-tree.monaco-tree-instance-${this.instance}.focused .monaco-tree-rows > .monaco-tree-row.focused:not(.highlighted) { background-color: ${styles.listFocusBackground}; }`); } + if (styles.listFocusForeground) { + content.push(`.monaco-tree.monaco-tree-instance-${this.instance}.focused .monaco-tree-rows > .monaco-tree-row.focused:not(.highlighted) { color: ${styles.listFocusForeground}; }`); + } + if (styles.listActiveSelectionBackground) { content.push(`.monaco-tree.monaco-tree-instance-${this.instance}.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) { background-color: ${styles.listActiveSelectionBackground}; }`); } @@ -589,6 +593,10 @@ export class TreeView extends HeightMap { content.push(`.monaco-tree.monaco-tree-instance-${this.instance} .monaco-tree-rows > .monaco-tree-row:hover:not(.highlighted):not(.selected):not(.focused) { background-color: ${styles.listHoverBackground}; }`); } + if (styles.listHoverForeground) { + content.push(`.monaco-tree.monaco-tree-instance-${this.instance} .monaco-tree-rows > .monaco-tree-row:hover:not(.highlighted):not(.selected):not(.focused) { color: ${styles.listHoverForeground}; }`); + } + if (styles.listDropBackground) { content.push(` .monaco-tree.monaco-tree-instance-${this.instance} .monaco-tree-wrapper.drop-target, diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index 4a597b87fd19dcc12389637c7c1f0f4a87cbcf75..5c2a75960e2298fa9edbfebc3fe6db43ad6a90f6 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -171,11 +171,13 @@ export const selectForeground = registerColor('dropdown.foreground', { dark: '#F export const selectBorder = registerColor('dropdown.border', { dark: selectBackground, light: '#CECECE', hc: contrastBorder }, nls.localize('dropdownBorder', "Dropdown border.")); export const listFocusBackground = registerColor('list.focusBackground', { dark: '#073655', light: '#DCEBFC', hc: null }, nls.localize('listFocusBackground', "List/Tree background color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.")); +export const listFocusForeground = registerColor('list.focusForeground', { dark: null, light: null, hc: null }, nls.localize('listFocusForeground', "List/Tree foreground color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.")); export const listActiveSelectionBackground = registerColor('list.activeSelectionBackground', { dark: '#094771', light: '#3399FF', hc: null }, nls.localize('listActiveSelectionBackground', "List/Tree background color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.")); -export const listInactiveSelectionBackground = registerColor('list.inactiveSelectionBackground', { dark: '#3F3F46', light: '#CCCEDB', hc: null }, nls.localize('listInactiveSelectionBackground', "List/Tree background color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.")); export const listActiveSelectionForeground = registerColor('list.activeSelectionForeground', { dark: Color.white, light: Color.white, hc: null }, nls.localize('listActiveSelectionForeground', "List/Tree foreground color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.")); +export const listInactiveSelectionBackground = registerColor('list.inactiveSelectionBackground', { dark: '#3F3F46', light: '#CCCEDB', hc: null }, nls.localize('listInactiveSelectionBackground', "List/Tree background color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.")); export const listInactiveSelectionForeground = registerColor('list.inactiveSelectionForeground', { dark: null, light: null, hc: null }, nls.localize('listInactiveSelectionForeground', "List/Tree foreground color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.")); export const listHoverBackground = registerColor('list.hoverBackground', { dark: '#2A2D2E', light: '#F0F0F0', hc: null }, nls.localize('listHoverBackground', "List/Tree background when hovering over items using the mouse.")); +export const listHoverForeground = registerColor('list.hoverForeground', { dark: null, light: null, hc: null }, nls.localize('listHoverForeground', "List/Tree foreground when hovering over items using the mouse.")); export const listDropBackground = registerColor('list.dropBackground', { dark: listFocusBackground, light: listFocusBackground, hc: null }, nls.localize('listDropBackground', "List/Tree drag and drop background when moving items around using the mouse.")); export const listHighlightForeground = registerColor('list.highlightForeground', { dark: '#0097fb', light: '#007acc', hc: focusBorder }, nls.localize('highlight', 'List/Tree foreground color of the match highlights when searching inside the list/tree.')); diff --git a/src/vs/platform/theme/common/styler.ts b/src/vs/platform/theme/common/styler.ts index 3d56035667677007340e99941fa3e6de3a1383fc..979bec60a2ca1a23ea1179c6ab8d9042383f4b7c 100644 --- a/src/vs/platform/theme/common/styler.ts +++ b/src/vs/platform/theme/common/styler.ts @@ -6,7 +6,7 @@ 'use strict'; import { ITheme, IThemeService } from 'vs/platform/theme/common/themeService'; -import { inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, listFocusBackground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listHoverBackground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, lighten, badgeBackground, badgeForeground, progressBarBackground } from 'vs/platform/theme/common/colorRegistry'; +import { inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, lighten, badgeBackground, badgeForeground, progressBarBackground } from 'vs/platform/theme/common/colorRegistry'; import { IDisposable } from 'vs/base/common/lifecycle'; import { SIDE_BAR_SECTION_HEADER_BACKGROUND } from 'vs/workbench/common/theme'; @@ -136,6 +136,7 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer pickerGroupForeground?: ColorIdentifier, pickerGroupBorder?: ColorIdentifier, listFocusBackground?: ColorIdentifier, + listFocusForeground?: ColorIdentifier, listActiveSelectionBackground?: ColorIdentifier, listActiveSelectionForeground?: ColorIdentifier, listFocusAndSelectionBackground?: ColorIdentifier, @@ -143,6 +144,7 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer listInactiveSelectionBackground?: ColorIdentifier, listInactiveSelectionForeground?: ColorIdentifier, listHoverBackground?: ColorIdentifier, + listHoverForeground?: ColorIdentifier, listDropBackground?: ColorIdentifier, listFocusOutline?: ColorIdentifier, listSelectionOutline?: ColorIdentifier, @@ -166,6 +168,7 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer inputValidationErrorBorder: (style && style.inputValidationErrorBorder) || inputValidationErrorBorder, inputValidationErrorBackground: (style && style.inputValidationErrorBackground) || inputValidationErrorBackground, listFocusBackground: (style && style.listFocusBackground) || listFocusBackground, + listFocusForeground: (style && style.listFocusForeground) || listFocusForeground, listActiveSelectionBackground: (style && style.listActiveSelectionBackground) || lighten(listActiveSelectionBackground, 0.1), listActiveSelectionForeground: (style && style.listActiveSelectionForeground) || listActiveSelectionForeground, listFocusAndSelectionBackground: style && style.listFocusAndSelectionBackground || listActiveSelectionBackground, @@ -173,6 +176,7 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer listInactiveSelectionBackground: (style && style.listInactiveSelectionBackground) || listInactiveSelectionBackground, listInactiveSelectionForeground: (style && style.listInactiveSelectionForeground) || listInactiveSelectionForeground, listHoverBackground: (style && style.listHoverBackground) || listHoverBackground, + listHoverForeground: (style && style.listHoverForeground) || listHoverForeground, listDropBackground: (style && style.listDropBackground) || listDropBackground, listFocusOutline: (style && style.listFocusOutline) || activeContrastBorder, listSelectionOutline: (style && style.listSelectionOutline) || activeContrastBorder, @@ -182,6 +186,7 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer export function attachListStyler(widget: IThemable, themeService: IThemeService, style?: { listFocusBackground?: ColorIdentifier, + listFocusForeground?: ColorIdentifier, listActiveSelectionBackground?: ColorIdentifier, listActiveSelectionForeground?: ColorIdentifier, listFocusAndSelectionBackground?: ColorIdentifier, @@ -190,6 +195,7 @@ export function attachListStyler(widget: IThemable, themeService: IThemeService, listInactiveSelectionBackground?: ColorIdentifier, listInactiveSelectionForeground?: ColorIdentifier, listHoverBackground?: ColorIdentifier, + listHoverForeground?: ColorIdentifier, listDropBackground?: ColorIdentifier, listFocusOutline?: ColorIdentifier, listInactiveFocusOutline?: ColorIdentifier, @@ -198,6 +204,7 @@ export function attachListStyler(widget: IThemable, themeService: IThemeService, }): IDisposable { return doAttachStyler(themeService, { listFocusBackground: (style && style.listFocusBackground) || listFocusBackground, + listFocusForeground: (style && style.listFocusForeground) || listFocusForeground, listActiveSelectionBackground: (style && style.listActiveSelectionBackground) || lighten(listActiveSelectionBackground, 0.1), listActiveSelectionForeground: (style && style.listActiveSelectionForeground) || listActiveSelectionForeground, listFocusAndSelectionBackground: style && style.listFocusAndSelectionBackground || listActiveSelectionBackground, @@ -206,6 +213,7 @@ export function attachListStyler(widget: IThemable, themeService: IThemeService, listInactiveSelectionBackground: (style && style.listInactiveSelectionBackground) || listInactiveSelectionBackground, listInactiveSelectionForeground: (style && style.listInactiveSelectionForeground) || listInactiveSelectionForeground, listHoverBackground: (style && style.listHoverBackground) || listHoverBackground, + listHoverForeground: (style && style.listHoverForeground) || listHoverForeground, listDropBackground: (style && style.listDropBackground) || listDropBackground, listFocusOutline: (style && style.listFocusOutline) || activeContrastBorder, listSelectionOutline: (style && style.listSelectionOutline) || activeContrastBorder,