diff --git a/src/vs/workbench/browser/parts/auxiliarybar/auxiliaryBarPart.ts b/src/vs/workbench/browser/parts/auxiliarybar/auxiliaryBarPart.ts index ded68cd9bbf..5daba48b778 100644 --- a/src/vs/workbench/browser/parts/auxiliarybar/auxiliaryBarPart.ts +++ b/src/vs/workbench/browser/parts/auxiliarybar/auxiliaryBarPart.ts @@ -12,12 +12,12 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { INotificationService } from 'vs/platform/notification/common/notification'; import { IStorageService } from 'vs/platform/storage/common/storage'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; -import { activeContrastBorder, contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry'; -import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService'; +import { contrastBorder } from 'vs/platform/theme/common/colorRegistry'; +import { IThemeService } from 'vs/platform/theme/common/themeService'; import { Extensions as PaneCompositeExtensions } from 'vs/workbench/browser/panecomposite'; import { BasePanelPart } from 'vs/workbench/browser/parts/panel/panelPart'; import { ActiveAuxiliaryContext, AuxiliaryBarFocusContext } from 'vs/workbench/common/contextkeys'; -import { SIDE_BAR_BACKGROUND, SIDE_BAR_BORDER, SIDE_BAR_FOREGROUND, SIDE_BAR_TITLE_FOREGROUND } from 'vs/workbench/common/theme'; +import { SIDE_BAR_BACKGROUND, SIDE_BAR_BORDER, SIDE_BAR_FOREGROUND } from 'vs/workbench/common/theme'; import { IViewDescriptorService, ViewContainerLocation } from 'vs/workbench/common/views'; import { IExtensionService } from 'vs/workbench/services/extensions/common/extensions'; import { IWorkbenchLayoutService, Parts, Position } from 'vs/workbench/services/layout/browser/layoutService'; @@ -126,63 +126,3 @@ export class AuxiliaryBarPart extends BasePanelPart { }; } } - -registerThemingParticipant((theme, collector) => { - - // Auxiliary Bar Background: since panels can host editors, we apply a background rule if the panel background - // color is different from the editor background color. This is a bit of a hack though. The better way - // would be to have a way to push the background color onto each editor widget itself somehow. - const auxiliaryBarBackground = theme.getColor(SIDE_BAR_BACKGROUND); - if (auxiliaryBarBackground && auxiliaryBarBackground !== theme.getColor(editorBackground)) { - collector.addRule(` - .monaco-workbench .part.auxiliarybar > .content .monaco-editor, - .monaco-workbench .part.auxiliarybar > .content .monaco-editor .margin, - .monaco-workbench .part.auxiliarybar > .content .monaco-editor .monaco-editor-background { - background-color: ${auxiliaryBarBackground}; - } - `); - } - - // Title Active - const titleActive = theme.getColor(SIDE_BAR_TITLE_FOREGROUND); - if (titleActive) { - collector.addRule(` - .monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label { - color: ${titleActive} !important; - } - `); - collector.addRule(` - .monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .action-label { - color: ${titleActive} !important; - } - `); - } - - // Styling with Outline color (e.g. high contrast theme) - const outline = theme.getColor(activeContrastBorder); - if (outline) { - collector.addRule(` - .monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label, - .monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label { - outline-color: ${outline}; - outline-width: 1px; - outline-style: solid; - border-bottom: none; - outline-offset: -2px; - } - - .monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked):hover .action-label { - outline-style: dashed; - } - `); - } - - // const inputBorder = theme.getColor(PANEL_INPUT_BORDER); - // if (inputBorder) { - // collector.addRule(` - // .monaco-workbench .part.auxiliarybar .monaco-inputbox { - // border-color: ${inputBorder} - // } - // `); - // } -}); diff --git a/src/vs/workbench/browser/parts/auxiliarybar/media/auxiliaryBarPart.css b/src/vs/workbench/browser/parts/auxiliarybar/media/auxiliaryBarPart.css index c71b8c2f5dd..74dbd62f7c0 100644 --- a/src/vs/workbench/browser/parts/auxiliarybar/media/auxiliaryBarPart.css +++ b/src/vs/workbench/browser/parts/auxiliarybar/media/auxiliaryBarPart.css @@ -7,3 +7,23 @@ display: none !important; visibility: hidden !important; } + +.monaco-workbench .part.auxiliarybar > .content .monaco-editor, +.monaco-workbench .part.auxiliarybar > .content .monaco-editor .margin, +.monaco-workbench .part.auxiliarybar > .content .monaco-editor .monaco-editor-background { + background-color: var(--vscode-sideBar-background) !important; +} + +.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label, +.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .action-label { + color: var(--vscode-sideBarTitle-foreground) !important; +} + +.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label, +.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label { + outline: var(--vscode-contrastActiveBorder, unset) solid 1px !important; +} + +.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked):hover .action-label { + outline: var(--vscode-contrastActiveBorder, unset) dashed 1px !important; +} diff --git a/src/vs/workbench/browser/parts/panel/media/panelpart.css b/src/vs/workbench/browser/parts/panel/media/panelpart.css index b5498e12048..846ca54ebd3 100644 --- a/src/vs/workbench/browser/parts/panel/media/panelpart.css +++ b/src/vs/workbench/browser/parts/panel/media/panelpart.css @@ -34,3 +34,42 @@ .monaco-workbench.noeditorarea .part.panel.left { border-right-width: 0; /* no border when editor area is hiden */ } + +.monaco-workbench .part.panel > .content .monaco-editor, +.monaco-workbench .part.panel > .content .monaco-editor .margin, +.monaco-workbench .part.panel > .content .monaco-editor .monaco-editor-background { + background-color: var(--vscode-panel-background) !important; +} + +.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .action-label, +.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label { + color: var(--vscode-panelTitle-activeForeground) !important; +} + +.monaco-workbench .part.panel .monaco-inputbox { + border-color: var(--vscode-panelInput-border) !important; +} + +.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .active-item-indicator:before { + border-top-color: var(--vscode-focusBorder) !important; +} + +.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus { + outline: none; +} + +.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked:not(:focus) .active-item-indicator:before, +.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked.clicked:focus .active-item-indicator:before { + border-top-color: var(--vscode-panelTitle-activeBorder) !important; +} + +.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label, +.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label { + outline: var(--vscode-contrastActiveBorder, unset) solid 1px !important; +} + +.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked):hover .action-label { + outline: var(--vscode-contrastActiveBorder, unset) dashed 1px !important; +} + + diff --git a/src/vs/workbench/browser/parts/panel/panelPart.ts b/src/vs/workbench/browser/parts/panel/panelPart.ts index a0c8283723b..513e653171a 100644 --- a/src/vs/workbench/browser/parts/panel/panelPart.ts +++ b/src/vs/workbench/browser/parts/panel/panelPart.ts @@ -19,9 +19,9 @@ import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { PanelActivityAction, TogglePanelAction, PlaceHolderPanelActivityAction, PlaceHolderToggleCompositePinnedAction, PositionPanelActionConfigs, SetPanelPositionAction } from 'vs/workbench/browser/parts/panel/panelActions'; -import { IThemeService, registerThemingParticipant, ThemeIcon } from 'vs/platform/theme/common/themeService'; -import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_INPUT_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, PANEL_DRAG_AND_DROP_BORDER } from 'vs/workbench/common/theme'; -import { activeContrastBorder, focusBorder, contrastBorder, editorBackground, badgeBackground, badgeForeground } from 'vs/platform/theme/common/colorRegistry'; +import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService'; +import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, PANEL_DRAG_AND_DROP_BORDER } from 'vs/workbench/common/theme'; +import { contrastBorder, badgeBackground, badgeForeground } from 'vs/platform/theme/common/colorRegistry'; import { CompositeBar, ICompositeBarItem, CompositeDragAndDrop } from 'vs/workbench/browser/parts/compositeBar'; import { IActivityHoverOptions, ToggleCompositePinnedAction } from 'vs/workbench/browser/parts/compositeBarActions'; import { IBadge } from 'vs/workbench/services/activity/common/activity'; @@ -1008,90 +1008,3 @@ export class PanelPart extends BasePanelPart { }; } } - -registerThemingParticipant((theme, collector) => { - - // Panel Background: since panels can host editors, we apply a background rule if the panel background - // color is different from the editor background color. This is a bit of a hack though. The better way - // would be to have a way to push the background color onto each editor widget itself somehow. - const panelBackground = theme.getColor(PANEL_BACKGROUND); - if (panelBackground && panelBackground !== theme.getColor(editorBackground)) { - collector.addRule(` - .monaco-workbench .part.panel > .content .monaco-editor, - .monaco-workbench .part.panel > .content .monaco-editor .margin, - .monaco-workbench .part.panel > .content .monaco-editor .monaco-editor-background { - background-color: ${panelBackground}; - } - `); - } - - // Title Active - const titleActive = theme.getColor(PANEL_ACTIVE_TITLE_FOREGROUND); - if (titleActive) { - collector.addRule(` - .monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label { - color: ${titleActive} !important; - } - `); - collector.addRule(` - .monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .action-label { - color: ${titleActive} !important; - } - `); - } - - const inputBorder = theme.getColor(PANEL_INPUT_BORDER); - if (inputBorder) { - collector.addRule(` - .monaco-workbench .part.panel .monaco-inputbox { - border-color: ${inputBorder} - } - `); - } - - - // Base Panel Styles - // Title focus - const focusBorderColor = theme.getColor(focusBorder); - if (focusBorderColor) { - collector.addRule(` - .monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .active-item-indicator:before { - border-top-color: ${focusBorderColor}; - } - `); - collector.addRule(` - .monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus { - outline: none; - } - `); - } - - const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER); - if (titleActiveBorder) { - collector.addRule(` - .monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked:not(:focus) .active-item-indicator:before, - .monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked.clicked:focus .active-item-indicator:before { - border-top-color: ${titleActiveBorder}; - } - `); - } - - // Styling with Outline color (e.g. high contrast theme) - const outline = theme.getColor(activeContrastBorder); - if (outline) { - collector.addRule(` - .monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label, - .monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label { - outline-color: ${outline}; - outline-width: 1px; - outline-style: solid; - border-bottom: none; - outline-offset: -1px; - } - - .monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked):hover .action-label { - outline-style: dashed; - } - `); - } -});