theming id changes

This commit is contained in:
Benjamin Pasero 2017-03-30 11:27:47 -07:00
parent 40864e1cbb
commit ea81c98e6d
6 changed files with 31 additions and 28 deletions

View file

@ -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",

View file

@ -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",

View file

@ -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",

View file

@ -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.

View file

@ -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;

View file

@ -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',