diff --git a/src/vs/base/browser/ui/button/button.css b/src/vs/base/browser/ui/button/button.css
index a5a79e7fc2d..14a189bd0fc 100644
--- a/src/vs/base/browser/ui/button/button.css
+++ b/src/vs/base/browser/ui/button/button.css
@@ -25,25 +25,6 @@
 	text-decoration: none !important;
 }
 
-.monaco-button {
-	color: var(--vscode-button-foreground);
-	background-color: var(--vscode-button-background);
-}
-
-.monaco-button:hover {
-	background-color: var(--vscode-button-hoverBackground);
-}
-
-.monaco-button.secondary {
-	color: var(--vscode-button-secondaryForeground);
-	background-color: var(--vscode-button-secondaryBackground);
-}
-
-.monaco-button.secondary:hover {
-	background-color: var(--vscode-button-secondaryHoverBackground);
-}
-
-
 .monaco-button.disabled:focus,
 .monaco-button.disabled {
 	opacity: 0.4 !important;
@@ -109,19 +90,11 @@
 .monaco-button-dropdown .monaco-button-dropdown-separator {
 	padding: 4px 0;
 	cursor: default;
-	background-color: var(--vscode-button-background);
-	border-top: 1px solid var(--vscode-button-border);
-	border-bottom: 1px solid var(--vscode-button-border);
-}
-
-.monaco-button.secondary + .monaco-button-dropdown-separator {
-	background-color: var(--vscode-button-secondaryBackground);
 }
 
 .monaco-button-dropdown .monaco-button-dropdown-separator > div {
 	height: 100%;
 	width: 1px;
-	background-color: var(--vscode-button-separator);
 }
 
 .monaco-button-dropdown > .monaco-button.monaco-dropdown-button {
@@ -159,3 +132,41 @@
 	margin: 0 0.2em;
 	color: inherit !important;
 }
+
+/* default color styles - based on CSS variables */
+
+.monaco-button.default-colors,
+.monaco-button-dropdown.default-colors > .monaco-button{
+	color: var(--vscode-button-foreground);
+	background-color: var(--vscode-button-background);
+}
+
+.monaco-button.default-colors:hover,
+.monaco-button-dropdown.default-colors > .monaco-button:hover {
+	background-color: var(--vscode-button-hoverBackground);
+}
+
+.monaco-button.default-colors.secondary,
+.monaco-button-dropdown.default-colors > .monaco-button.secondary {
+	color: var(--vscode-button-secondaryForeground);
+	background-color: var(--vscode-button-secondaryBackground);
+}
+
+.monaco-button.default-colors.secondary:hover,
+.monaco-button-dropdown.default-colors > .monaco-button.secondary:hover {
+	background-color: var(--vscode-button-secondaryHoverBackground);
+}
+
+.monaco-button-dropdown.default-colors .monaco-button-dropdown-separator {
+	background-color: var(--vscode-button-background);
+	border-top: 1px solid var(--vscode-button-border);
+	border-bottom: 1px solid var(--vscode-button-border);
+}
+
+.monaco-button-dropdown.default-colors .monaco-button.secondary + .monaco-button-dropdown-separator {
+	background-color: var(--vscode-button-secondaryBackground);
+}
+
+.monaco-button-dropdown.default-colors .monaco-button-dropdown-separator > div {
+	background-color: var(--vscode-button-separator);
+}
diff --git a/src/vs/platform/actions/browser/buttonbar.ts b/src/vs/platform/actions/browser/buttonbar.ts
index 811ccaac879..c08d3ab3548 100644
--- a/src/vs/platform/actions/browser/buttonbar.ts
+++ b/src/vs/platform/actions/browser/buttonbar.ts
@@ -88,6 +88,7 @@ export class MenuWorkbenchButtonBar extends ButtonBar {
 				}
 
 				btn.enabled = action.enabled;
+				btn.element.classList.add('default-colors');
 				if (conifgProvider(action)?.showLabel ?? true) {
 					btn.label = action.label;
 				} else {