diff --git a/extensions/theme-abyss/themes/abyss-color-theme.json b/extensions/theme-abyss/themes/abyss-color-theme.json index bf4e953d0a2..c84af790e44 100644 --- a/extensions/theme-abyss/themes/abyss-color-theme.json +++ b/extensions/theme-abyss/themes/abyss-color-theme.json @@ -252,8 +252,9 @@ "colors": { // Base Colors - "inputBackground": "#181f2f", - "selectBackground": "#181f2f", + "inputBoxBackground": "#181f2f", + "dropdownBackground": "#181f2f", + "inputBoxActiveOptionBorder": "#266fa0", // Editor Colors "editorBackground": "#000c18", @@ -280,7 +281,6 @@ "editorMarkerNavigationWarning": "#00FF00", "editorFindWidgetBackground": "#262641", - "inputActiveOptionBorder": "#0063a5", // Workbench Colors "tabsContainerBackground": "#1c1c2a", diff --git a/extensions/theme-quietlight/themes/quietlight-color-theme.json b/extensions/theme-quietlight/themes/quietlight-color-theme.json index 70dc7972979..98cfc0320d4 100644 --- a/extensions/theme-quietlight/themes/quietlight-color-theme.json +++ b/extensions/theme-quietlight/themes/quietlight-color-theme.json @@ -461,10 +461,12 @@ "activityBarBackground": "#3D3439", "panelBackground": "#F5F5F5", "sideBarBackground": "#F5F5F5", - "focus": "#705697", + "focusedElementOutline": "#705697", "editorLineNumbers": "#9DA39A", "editorCursor": "#54494B", - "inputBackground": "#F5F5F5", + "inputBoxBackground": "#F5F5F5", + "inputBoxActiveOptionBorder": "#adafb7", + "dropdownBackground": "#F5F5F5", "editorFindMatch": "#BF9CAC", "editorFindMatchHighlight": "#edc9d8", "peekViewEditorMatchHighlight": "#C2DFE3", diff --git a/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json b/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json index ac1a3117153..c1f1da4bc05 100644 --- a/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json +++ b/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json @@ -302,11 +302,12 @@ "sideBarTitleForeground": "#93A1A1", "activityBarBackground": "#003847", "activityBarDragAndDropBackground": "#00212B", - "activityBadgeBackground": "#268BD2", + "activityBadgeBackground": "#047aa6", "editorFindWidgetBackground": "#00212B", - "inputBackground": "#003847", - "inputForeground": "#93A1A1", - "focus": "#2AA19899", + "inputBoxBackground": "#003847", + "inputBoxForeground": "#93A1A1", + "inputBoxActiveOptionBorder": "#2AA19899", + "focusedElementOutline": "#2AA19899", "titleBarActiveBackground": "#002C39", "titleBarInactiveBackground": "#002C39", "statusBarForeground": "#93A1A1", @@ -322,8 +323,8 @@ "activeTabInactiveGroupForeground": "#93A1A1", "inactiveTabInactiveGroupForeground": "#93A1A1", "debugToolBarBackground": "#00212B", - "selectBackground": "#00212B", - "selectBorder": "#2AA19899", + "dropdownBackground": "#00212B", + "dropdownBorder": "#2AA19899", "peekViewResultsBackground": "#00212B", "peekViewTitleBackground": "#00212B", diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index 6bd012ea7e5..8a2d9b0bd17 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -120,11 +120,11 @@ export function registerColor(id: string, defaults: ColorDefaults, description: // ----- base colors export const foreground = registerColor('foreground', { dark: '#CCCCCC', light: '#6C6C6C', hc: '#FFFFFF' }, nls.localize('foreground', "Overall foreground color. This color is only used if not overridden by a component.")); -export const focus = registerColor('focus', { +export const focus = registerColor('focusedElementOutline', { dark: Color.fromRGBA(new RGBA(14, 99, 156)).transparent(0.6), light: Color.fromRGBA(new RGBA(0, 122, 204)).transparent(0.4), hc: '#F38518' -}, nls.localize('focus', "Overall outline/border color for focused elements. This color is only used if not overridden by a component.")); +}, nls.localize('focusedElementOutline', "Overall outline/border color for focused elements. This color is only used if not overridden by a component.")); /** * Commonly used High contrast colors. @@ -135,14 +135,14 @@ export const highContrastOutline = registerColor('highContrastOutline', { light: /** * Widgets */ -export const inputBackground = registerColor('inputBackground', { dark: '#3C3C3C', light: Color.white, hc: Color.black }, nls.localize('inputBackground', 'Input field background.')); -export const inputForeground = registerColor('inputForeground', { dark: foreground, light: foreground, hc: foreground }, nls.localize('inputForeground', 'Input field foreground.')); -export const inputBorder = registerColor('inputBorder', { dark: null, light: null, hc: highContrastBorder }, nls.localize('inputBorder', 'Input field border.')); -export const inputActiveOptionBorder = registerColor('inputActiveOptionBorder', { dark: '#007ACC', light: '#007ACC', hc: highContrastOutline }, nls.localize('inputActiveOptionBorder', 'Border color of activated options in input fields.')); +export const inputBackground = registerColor('inputBoxBackground', { dark: '#3C3C3C', light: Color.white, hc: Color.black }, nls.localize('inputBoxBackground', "Input box background.")); +export const inputForeground = registerColor('inputBoxForeground', { dark: foreground, light: foreground, hc: foreground }, nls.localize('inputBoxForeground', "Input box foreground.")); +export const inputBorder = registerColor('inputBoxBorder', { dark: null, light: null, hc: highContrastBorder }, nls.localize('inputBoxBorder', "Input box border.")); +export const inputActiveOptionBorder = registerColor('inputBoxActiveOptionBorder', { dark: '#007ACC', light: '#007ACC', hc: highContrastOutline }, nls.localize('inputBoxActiveOptionBorder', "Border color of activated options in input fields.")); -export const selectBackground = registerColor('selectBackground', { dark: '#3C3C3C', light: Color.white, hc: '#3C3C3C' }, nls.localize('selectBackground', 'Select field background.')); -export const selectForeground = registerColor('selectForeground', { dark: '#F0F0F0', light: null, hc: Color.white }, nls.localize('selectForeground', 'Select field foreground.')); -export const selectBorder = registerColor('selectBorder', { dark: selectBackground, light: '#CECECE', hc: selectBackground }, nls.localize('selectBorder', 'Select field border.')); +export const selectBackground = registerColor('dropdownBackground', { dark: '#3C3C3C', light: Color.white, hc: '#3C3C3C' }, nls.localize('dropdownBackground', "Dropdown background.")); +export const selectForeground = registerColor('dropdownForeground', { dark: '#F0F0F0', light: null, hc: Color.white }, nls.localize('dropdownForeground', "Dropdown foreground.")); +export const selectBorder = registerColor('dropdownBorder', { dark: selectBackground, light: '#CECECE', hc: selectBackground }, nls.localize('dropdownBorder', "Dropdown border.")); /** * Editor background color. diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index c5714c9590e..f5a7be747e4 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts @@ -35,7 +35,7 @@ import { IWindowService } from 'vs/platform/windows/common/windows'; import { getCodeEditor } from 'vs/editor/common/services/codeEditorService'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { editorBackground, highContrastBorder, highContrastOutline } from 'vs/platform/theme/common/colorRegistry'; -import { Themable, TABS_CONTAINER_BACKGROUND, NO_TABS_CONTAINER_BACKGROUND, EDITOR_GROUP_BORDER_COLOR, EDITOR_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme'; +import { Themable, TABS_CONTAINER_BACKGROUND, EDITOR_HEADER_BACKGROUND, EDITOR_GROUP_BORDER_COLOR, EDITOR_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme'; export enum Rochade { NONE, @@ -1017,7 +1017,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro POSITIONS.forEach(position => { const container = this.getTitleAreaControl(position).getContainer(); - container.style.backgroundColor = this.getColor(this.tabOptions.showTabs ? TABS_CONTAINER_BACKGROUND : NO_TABS_CONTAINER_BACKGROUND); + container.style.backgroundColor = this.getColor(this.tabOptions.showTabs ? TABS_CONTAINER_BACKGROUND : EDITOR_HEADER_BACKGROUND); container.style.borderBottomWidth = (this.isHighContrastTheme && this.tabOptions.showTabs) ? '1px' : null; container.style.borderBottomStyle = (this.isHighContrastTheme && this.tabOptions.showTabs) ? 'solid' : null; container.style.borderBottomColor = (this.isHighContrastTheme && this.tabOptions.showTabs) ? this.getColor(highContrastBorder) : null; diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index d3b9d4bba55..5eb370b286d 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -17,12 +17,6 @@ export const TABS_CONTAINER_BACKGROUND = registerColor('tabsContainerBackground' hc: null }, nls.localize('tabsContainerBackground', "Background color of the tabs container. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); -export const NO_TABS_CONTAINER_BACKGROUND = registerColor('noTabsContainerBackground', { - dark: editorBackground, - light: editorBackground, - hc: editorBackground -}, nls.localize('noTabsContainerBackground', "Background color of the editor title container when no tabs are enabled.")); - export const ACTIVE_TAB_BACKGROUND = registerColor('activeTabBackground', { dark: editorBackground, light: editorBackground, @@ -69,6 +63,12 @@ export const TAB_BORDER = registerColor('tabBorder', { // < --- Editors --- > +export const EDITOR_HEADER_BACKGROUND = registerColor('editorHeaderBackground', { + dark: editorBackground, + light: editorBackground, + hc: editorBackground +}, nls.localize('editorHeaderBackground', "Background color of the editor title header when no tabs are enabled.")); + export const EDITOR_GROUP_BORDER_COLOR = registerColor('editorGroupBorder', { dark: '#444444', light: '#E7E7E7',