diff --git a/extensions/theme-abyss/themes/abyss-color-theme.json b/extensions/theme-abyss/themes/abyss-color-theme.json index 6ad871c977f..51ba6a0477a 100644 --- a/extensions/theme-abyss/themes/abyss-color-theme.json +++ b/extensions/theme-abyss/themes/abyss-color-theme.json @@ -295,6 +295,7 @@ "statusBarDebuggingBackground": "#10192c", "debugToolBarBackground": "#051336", "activityBarBackground": "#051336", + "activityBadgeBackground": "#0063a5", "sideBarBackground": "#060621", "titleBarActiveBackground": "#10192c", "titleBarInactiveBackground": "#10192caa" diff --git a/src/vs/base/browser/ui/checkbox/checkbox.ts b/src/vs/base/browser/ui/checkbox/checkbox.ts index 96c21c41667..a643e9f86a9 100644 --- a/src/vs/base/browser/ui/checkbox/checkbox.ts +++ b/src/vs/base/browser/ui/checkbox/checkbox.ts @@ -105,7 +105,7 @@ export class Checkbox extends Widget { protected _applyStyles() { if (this.domNode) { - this.domNode.style.borderColor = this._checked ? this._opts.checkedBorderColor.toString() : null; + this.domNode.style.borderColor = this._checked && this._opts.checkedBorderColor ? this._opts.checkedBorderColor.toString() : null; } } diff --git a/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts b/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts index 75b41031e48..4a2f985de9a 100644 --- a/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts +++ b/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts @@ -23,6 +23,9 @@ import { ViewletDescriptor } from 'vs/workbench/browser/viewlet'; import { dispose } from 'vs/base/common/lifecycle'; import { IViewletService, } from 'vs/workbench/services/viewlet/browser/viewlet'; import { IPartService, Parts } from 'vs/workbench/services/part/common/partService'; +import { IThemeService, ITheme } from "vs/platform/theme/common/themeService"; +import { ACTIVITY_BADGE_FOREGROUND, ACTIVITY_BADGE_BACKGROUND } from "vs/workbench/common/theme"; +import { highContrastBorder } from "vs/platform/theme/common/colorRegistry"; export class ActivityAction extends Action { private badge: IBadge; @@ -119,7 +122,8 @@ export class ActivityActionItem extends BaseActionItem { @IContextMenuService private contextMenuService: IContextMenuService, @IActivityBarService private activityBarService: IActivityBarService, @IKeybindingService private keybindingService: IKeybindingService, - @IInstantiationService instantiationService: IInstantiationService + @IInstantiationService instantiationService: IInstantiationService, + @IThemeService private themeService: IThemeService ) { super(null, action, { draggable: true }); @@ -136,6 +140,29 @@ export class ActivityActionItem extends BaseActionItem { } action.onDidChangeBadge(this.handleBadgeChangeEvenet, this, this._callOnDispose); + this.themeService.onThemeChange(this.onThemeChange, this, this._callOnDispose); + } + + private onThemeChange(theme: ITheme): void { + this.updateStyles(); + } + + private updateStyles(): void { + const theme = this.themeService.getTheme(); + const isHighContrastTheme = theme.type === 'hc'; + + if (this.$badgeContent) { + const foreground = theme.getColor(ACTIVITY_BADGE_FOREGROUND); + const background = theme.getColor(ACTIVITY_BADGE_BACKGROUND); + const hcBorder = theme.getColor(highContrastBorder); + + this.$badgeContent.style('color', foreground ? foreground.toString() : null); + this.$badgeContent.style('background-color', background ? background.toString() : null); + + this.$badgeContent.style('border-style', isHighContrastTheme ? 'solid' : null); + this.$badgeContent.style('border-width', isHighContrastTheme ? '1px' : null); + this.$badgeContent.style('border-color', isHighContrastTheme && hcBorder ? hcBorder.toString() : null); + } } private getKeybindingLabel(id: string): string { @@ -250,6 +277,8 @@ export class ActivityActionItem extends BaseActionItem { this.activityBarService.move(draggedViewlet.id, this.viewlet.id); } }); + + this.updateStyles(); } public static getDraggedViewlet(): ViewletDescriptor { diff --git a/src/vs/workbench/browser/parts/activitybar/media/activityaction.css b/src/vs/workbench/browser/parts/activitybar/media/activityaction.css index ae4bc329f9e..a2aed032db1 100644 --- a/src/vs/workbench/browser/parts/activitybar/media/activityaction.css +++ b/src/vs/workbench/browser/parts/activitybar/media/activityaction.css @@ -97,11 +97,6 @@ text-align: center; } -.hc-black .monaco-workbench > .activitybar > .content .monaco-action-bar .badge .badge-content { - background: none; - border: 1px solid; -} - .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item .action-label.active, .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item:hover .action-label { opacity: 1; @@ -150,13 +145,6 @@ opacity: 1; } -.vs .monaco-workbench > .activitybar > .content .monaco-action-bar .badge .badge-content, -.vs-dark .monaco-workbench > .activitybar > .content .monaco-action-bar .badge .badge-content, -.hc-black .monaco-workbench > .activitybar > .content .monaco-action-bar .badge .badge-content { - color: white; - background-color: #007ACC; -} - .vs .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item .action-label:focus:before, .vs-dark .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item .action-label:focus:before { border-left-color: #007ACC; @@ -179,9 +167,4 @@ .hc-black .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item .action-label:hover:before { outline-color: #f38518; -} - -.hc-black .monaco-workbench > .activitybar > .content .monaco-action-bar .badge .badge-content { - background-color: #000; - border-color: #6FC3DF; } \ No newline at end of file diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index 3d2adc8d26e..f0ccb27ad14 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -164,6 +164,18 @@ export const ACTIVITY_BAR_BACKGROUND = registerColor('activityBarBackground', { hc: '#000000' }, nls.localize('activityBarBackground', "Activity bar background color. The activity bar is showing on the far left or right and allows to switch between views of the side bar.")); +export const ACTIVITY_BADGE_BACKGROUND = registerColor('activityBadgeBackground', { + dark: '#007ACC', + light: '#007ACC', + hc: '#000000' +}, nls.localize('activityBadgeBackground', "Activity notification badge background color. The activity bar is showing on the far left or right and allows to switch between views of the side bar.")); + +export const ACTIVITY_BADGE_FOREGROUND = registerColor('activityBadgeForeground', { + dark: Color.white, + light: Color.white, + hc: Color.white +}, nls.localize('activityBadgeForeground', "Activity notification badge foreground color. The activity bar is showing on the far left or right and allows to switch between views of the side bar.")); + // < --- Side Bar --- >