diff --git a/packages/debug/src/browser/debug-frontend-application-contribution.ts b/packages/debug/src/browser/debug-frontend-application-contribution.ts
index 9a4e1791b0be9..c0865040051c5 100644
--- a/packages/debug/src/browser/debug-frontend-application-contribution.ts
+++ b/packages/debug/src/browser/debug-frontend-application-contribution.ts
@@ -1278,6 +1278,17 @@ export class DebugFrontendApplicationContribution extends AbstractViewContributi
                     light: 'statusBar.border',
                     hc: 'statusBar.border'
                 }, description: 'Status bar border color separating to the sidebar and editor when a program is being debugged. The status bar is shown in the bottom of the window'
+            },
+            // Debug Exception Widget colors should be aligned with
+            // https://github.com/microsoft/vscode/blob/ff5f581425da6230b6f9216ecf19abf6c9d285a6/src/vs/workbench/contrib/debug/browser/exceptionWidget.ts#L23
+            {
+                id: 'debugExceptionWidget.border', defaults: {
+                    dark: '#a31515', light: '#a31515', hc: '#a31515'
+                }, description: 'Exception widget border color.',
+            }, {
+                id: 'debugExceptionWidget.background', defaults: {
+                    dark: '#420b0d', light: '#f1dfde', hc: '#420b0d'
+                }, description: 'Exception widget background color.'
             }
         );
     }
diff --git a/packages/debug/src/browser/style/debug-bright.useable.css b/packages/debug/src/browser/style/debug-bright.useable.css
index a1a52ac1059fb..5b1f2aa740cdf 100644
--- a/packages/debug/src/browser/style/debug-bright.useable.css
+++ b/packages/debug/src/browser/style/debug-bright.useable.css
@@ -10,6 +10,4 @@
     --theia-debug-configure: url('configure.svg');
     --theia-debug-repl: url('repl.svg');
     --breakpoints-activate-url: url('breakpoints-activate.svg');
-    --theia-debug-exception-widget-border-color: #a31515;
-    --theia-debug-exception-widget-background-color: #f1dfde;
 }
diff --git a/packages/debug/src/browser/style/debug-dark.useable.css b/packages/debug/src/browser/style/debug-dark.useable.css
index 1bc0f32e6ff54..b33b4a5274d78 100644
--- a/packages/debug/src/browser/style/debug-dark.useable.css
+++ b/packages/debug/src/browser/style/debug-dark.useable.css
@@ -10,6 +10,4 @@
     --theia-debug-configure: url('configure-inverse.svg');
     --theia-debug-repl: url('repl-inverse.svg');
     --breakpoints-activate-url: url('breakpoints-activate-inverse.svg');
-    --theia-debug-exception-widget-border-color: #a31515;
-    --theia-debug-exception-widget-background-color: #420b0d;
 }
diff --git a/packages/debug/src/browser/style/index.css b/packages/debug/src/browser/style/index.css
index c2e045835af90..c43106f4dcce8 100644
--- a/packages/debug/src/browser/style/index.css
+++ b/packages/debug/src/browser/style/index.css
@@ -399,13 +399,13 @@
 
 /** Exception Widget */
 .monaco-editor .zone-widget .zone-widget-container.theia-debug-exception-widget {
-    color: var(--theia-content-font-color0);
+    color: var(--theia-editor-foreground);
     font-size: var(--theia-code-font-size);
     line-height: var(--theia-code-line-height);
     font-family: var(--theia-code-font-family);
-    border-top-color: var(--theia-debug-exception-widget-border-color);
-    border-bottom-color: var(--theia-debug-exception-widget-border-color);
-    background-color: var(--theia-debug-exception-widget-background-color);
+    border-top-color: var(--theia-debugExceptionWidget-border);
+    border-bottom-color: var(--theia-debugExceptionWidget-border);
+    background-color: var(--theia-debugExceptionWidget-background);
     padding: var(--theia-ui-padding) calc(var(--theia-ui-padding)*1.5);
 	white-space: pre-wrap;
 	user-select: text;