diff --git a/superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx b/superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx
index a98820837e5..890374012a5 100644
--- a/superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx
+++ b/superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx
@@ -18,6 +18,7 @@
  */
 import { ReactNode } from 'react';
 import { t } from '@apache-superset/core/translation';
+import { styled } from '@apache-superset/core/theme';
 import { ErrorSource, SupersetError } from '@superset-ui/core';
 import { Typography } from '@superset-ui/core/components';
 import { getErrorMessageComponentRegistry } from './getErrorMessageComponentRegistry';
@@ -25,6 +26,14 @@ import { ErrorAlert } from './ErrorAlert';
 
 const DEFAULT_TITLE = t('Unexpected error');
 
+// Render the stack trace in the monospace font in both light and dark mode.
+// Set font-family explicitly from the theme token (as SQL Lab does) rather
+// than relying on the browser/antd default styling for `pre`, which is
+// cascade-order dependent and can fall back to the UI font in dark mode.
+const StackTrace = styled.pre`
+  font-family: ${({ theme }) => theme.fontFamilyCode};
+`;
+
 type Props = {
   title?: string;
   error?: SupersetError;
@@ -90,7 +99,7 @@ export function ErrorMessageWithStackTrace({
           </Typography.Link>
         )}
         <br />
-        {stackTrace && <pre>{stackTrace}</pre>}
+        {stackTrace && <StackTrace>{stackTrace}</StackTrace>}
       </>
     ) : undefined);