diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index e043102d6ef9ad05e5d909b23be0451da53cdd1b..0046c31e1dd2f1d805673928088b2751687288f6 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts @@ -1145,14 +1145,15 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro const containers = $this.visibleEditors.filter(e => !!e).map(e => e.getContainer()); containers.forEach((container, index) => { if (container && DOM.isAncestor(target, container.getHTMLElement())) { + const useOutline = $this.isHighContrastTheme; overlay = $('div').style({ top: $this.tabOptions.showTabs ? `${EditorGroupsControl.EDITOR_TITLE_HEIGHT}px` : 0, height: $this.tabOptions.showTabs ? `calc(100% - ${EditorGroupsControl.EDITOR_TITLE_HEIGHT}px` : '100%', backgroundColor: $this.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND), - outlineColor: $this.isHighContrastTheme ? $this.getColor(highContrastOutline) : null, - outlineOffset: $this.isHighContrastTheme ? '-2px' : null, - outlineStyle: $this.isHighContrastTheme ? 'dashed' : null, - outlineWidth: $this.isHighContrastTheme ? '2px' : null + outlineColor: useOutline ? $this.getColor(highContrastOutline) : null, + outlineOffset: useOutline ? '-2px' : null, + outlineStyle: useOutline ? 'dashed' : null, + outlineWidth: useOutline ? '2px' : null }).id(overlayId); overlay.appendTo(container); diff --git a/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css b/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css index 00db1ce1357acdd8c52f9990ba180c9a46c6aa8a..77ace7d3011220cf1616f78128f90c48d2b6f4dd 100644 --- a/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css +++ b/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css @@ -55,34 +55,4 @@ .monaco-workbench > .part.statusbar > .statusbar-item a:hover:not([disabled]):not(.disabled) { text-decoration: none; -} - -/* TODO@theme */ - -.hc-black .monaco-workbench > .part.statusbar { - border-top-width: 1px; - border-top-style: solid; - border-top-color: #6FC3DF; -} - -.vs .monaco-workbench > .part.statusbar > .statusbar-item a:hover:not([disabled]):not(.disabled), -.vs-dark .monaco-workbench > .part.statusbar > .statusbar-item a:hover:not([disabled]):not(.disabled), -.hc-black .monaco-workbench > .part.statusbar > .statusbar-item a:hover:not([disabled]):not(.disabled) { - background-color: rgba(255, 255, 255, 0.12); -} - -.vs .monaco-workbench > .part.statusbar > .statusbar-item a:active:not([disabled]):not(.disabled), -.vs-dark .monaco-workbench > .part.statusbar > .statusbar-item a:active:not([disabled]):not(.disabled), -.hc-black .monaco-workbench > .part.statusbar > .statusbar-item a:active:not([disabled]):not(.disabled) { - background-color: rgba(255, 255, 255, 0.18); -} - -.vs .monaco-workbench > .part.statusbar > .statusbar-item .status-bar-info, -.vs-dark .monaco-workbench > .part.statusbar > .statusbar-item .status-bar-info { - background-color: #388a34; -} - -.vs .monaco-workbench > .part.statusbar > .statusbar-item a.status-bar-info:hover:not([disabled]):not(.disabled), -.vs-dark .monaco-workbench > .part.statusbar > .statusbar-item a.status-bar-info:hover:not([disabled]):not(.disabled) { - background-color: #369432; } \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts b/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts index baa5c6c3122c195420b4392a026de081bd7d45f9..45ec34d8fbe82a34c84cfe724dfe227b96a4ad84 100644 --- a/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts +++ b/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts @@ -26,9 +26,10 @@ import { IStatusbarService, IStatusbarEntry } from 'vs/platform/statusbar/common import { getCodeEditor } from 'vs/editor/common/services/codeEditorService'; import { IContextMenuService } from 'vs/platform/contextview/browser/contextView'; import { Action } from 'vs/base/common/actions'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; -import { STATUS_BAR_BACKGROUND, STATUS_BAR_FOREGROUND, STATUS_BAR_NO_FOLDER_BACKGROUND } from 'vs/workbench/common/theme'; +import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; +import { STATUS_BAR_BACKGROUND, STATUS_BAR_FOREGROUND, STATUS_BAR_NO_FOLDER_BACKGROUND, STATUS_BAR_INFO_ITEM_BACKGROUND, STATUS_BAR_INFO_ITEM_HOVER_BACKGROUND, STATUS_BAR_ITEM_HOVER_BACKGROUND, STATUS_BAR_ITEM_ACTIVE_BACKGROUND } from 'vs/workbench/common/theme'; import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace'; +import { highContrastBorder } from 'vs/platform/theme/common/colorRegistry'; export class StatusbarPart extends Part implements IStatusbarService { @@ -135,6 +136,11 @@ export class StatusbarPart extends Part implements IStatusbarService { container.style('color', this.getColor(STATUS_BAR_FOREGROUND)); container.style('background-color', this.getColor(this.contextService.hasWorkspace() ? STATUS_BAR_BACKGROUND : STATUS_BAR_NO_FOLDER_BACKGROUND)); + + const useBorder = this.isHighContrastTheme; + container.style('border-top-width', useBorder ? '1px' : null); + container.style('border-top-style', useBorder ? 'solid' : null); + container.style('border-top-color', useBorder ? this.getColor(highContrastBorder) : null); } private doCreateStatusItem(alignment: StatusbarAlignment, priority: number = 0): HTMLElement { @@ -309,4 +315,26 @@ class ManageExtensionAction extends Action { public run(extensionId: string): TPromise { return this.commandService.executeCommand('_extensions.manage', extensionId); } -} \ No newline at end of file +} + +registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { + const statusBarItemHoverBackground = theme.getColor(STATUS_BAR_ITEM_HOVER_BACKGROUND); + if (statusBarItemHoverBackground) { + collector.addRule(`.monaco-workbench > .part.statusbar > .statusbar-item a:hover:not([disabled]):not(.disabled) { background-color: ${statusBarItemHoverBackground}; }`); + } + + const statusBarItemActiveBackground = theme.getColor(STATUS_BAR_ITEM_ACTIVE_BACKGROUND); + if (statusBarItemActiveBackground) { + collector.addRule(`.monaco-workbench > .part.statusbar > .statusbar-item a:active:not([disabled]):not(.disabled) { background-color: ${statusBarItemActiveBackground}; }`); + } + + const statusBarInfoItemBackground = theme.getColor(STATUS_BAR_INFO_ITEM_BACKGROUND); + if (statusBarInfoItemBackground) { + collector.addRule(`.monaco-workbench > .part.statusbar > .statusbar-item .status-bar-info { background-color: ${statusBarInfoItemBackground}; }`); + } + + const statusBarInfoItemHoverBackground = theme.getColor(STATUS_BAR_INFO_ITEM_HOVER_BACKGROUND); + if (statusBarInfoItemHoverBackground) { + collector.addRule(`.monaco-workbench > .part.statusbar > .statusbar-item a.status-bar-info:hover:not([disabled]):not(.disabled) { background-color: ${statusBarInfoItemHoverBackground}; }`); + } +}); \ No newline at end of file diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index f005f1797704c32609cfa0752aa1c79d6124bb97..ac5d16b8d06f40f8608f22023fcd45e84266483b 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -124,6 +124,30 @@ export const STATUS_BAR_NO_FOLDER_BACKGROUND = registerColor('statusBarNoFolderB hc: null }, nls.localize('statusBarNoFolderBackground', "Status bar background color when no folder is opened. The status bar is shown in the bottom of the window")); +export const STATUS_BAR_ITEM_ACTIVE_BACKGROUND = registerColor('statusBarItemActiveBackground', { + dark: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.18), + light: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.18), + hc: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.18) +}, nls.localize('statusBarItemActiveBackground', "Status bar item background color when clicking. The status bar is shown in the bottom of the window")); + +export const STATUS_BAR_ITEM_HOVER_BACKGROUND = registerColor('statusBarItemHoverBackground', { + dark: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.12), + light: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.12), + hc: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.12) +}, nls.localize('statusBarItemHoverBackground', "Status bar item background color when hovering. The status bar is shown in the bottom of the window")); + +export const STATUS_BAR_INFO_ITEM_BACKGROUND = registerColor('statusBarInfoItemBackground', { + dark: '#388a34', + light: '#388a34', + hc: '#388a34' +}, nls.localize('statusBarInfoItemBackground', "Status bar info item background color. The status bar is shown in the bottom of the window")); + +export const STATUS_BAR_INFO_ITEM_HOVER_BACKGROUND = registerColor('statusBarInfoItemHoverBackground', { + dark: '#369432', + light: '#369432', + hc: '#369432' +}, nls.localize('statusBarInfoItemHoverBackground', "Status bar info item background color when hovering. The status bar is shown in the bottom of the window")); + /** * Base class for all themable workbench components. */