theming - activity bar badges

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"

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

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 {

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

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