withastro · MoustaphaDev · Jan 16, 2023 · Jan 16, 2023 · Jan 16, 2023 · Jan 16, 2023
diff --git a/.changeset/smart-lies-grow.md b/.changeset/smart-lies-grow.md
@@ -0,0 +1,14 @@
+---
+'astro': minor
+---
+
+Add an `errorOverlayTheme` option in the astro config that will allow to specify the theme of the error overlay.
+
+```ts
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+    // defaults to systeme
+    errorOverlayTheme: 'dark', // or 'light' or 'system'
+});
+```
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
@@ -898,6 +898,16 @@ export interface AstroUserConfig {
 	 */
 	vite?: ViteUserConfig;
 
+	/**
+	 * @docs
+	 * @kind heading
+	 * @name Error Overlay Theme
+	 * @description
+	 * The error overlay is the UI that appears when Astro encounters an error during development. You can customize the theme of the error overlay by setting this option to `dark`, `light`, or `system`.
+	 * @default `system`
+	 */
+	errorOverlayTheme?: 'dark' | 'light' | 'system';
+
 	/**
 	 * @docs
 	 * @kind heading

diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts
@@ -34,6 +34,7 @@ const ASTRO_CONFIG_DEFAULTS: AstroUserConfig & any = {
 	},
 	vite: {},
 	legacy: {},
+	errorOverlayTheme: 'system',
 };
 
 export const AstroConfigSchema = z.object({
@@ -166,6 +167,10 @@ export const AstroConfigSchema = z.object({
 		.default(ASTRO_CONFIG_DEFAULTS.vite),
 	experimental: z.object({}).optional().default({}),
 	legacy: z.object({}).optional().default({}),
+	errorOverlayTheme: z
+		.union([z.literal('dark'), z.literal('light'), z.literal('system')])
+		.optional()
+		.default(ASTRO_CONFIG_DEFAULTS.errorOverlayTheme),
 });
 
 export function createRelativeSchema(cmd: string, fileProtocolRoot: URL) {

diff --git a/packages/astro/src/core/errors/overlay.ts b/packages/astro/src/core/errors/overlay.ts
@@ -1,31 +1,64 @@
 import type { AstroConfig } from '../../@types/astro';
 import type { AstroErrorPayload } from './dev/vite';
 
-const style = /* css */ `
-* {
-  box-sizing: border-box;
-}
+const wrapDarkColorSchemeMedia = (css: string) => `@media (prefers-color-scheme: dark) {
+  ${css}
+}`;
+const wrapHostSelector = (css: string) => `:host {
+  ${css}
+}`;
 
-:host {
-  /** Needed so Playwright can find the element */
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 99999;
+type Theme = AstroConfig['errorOverlayTheme'];
 
-  /* Fonts */
-  --font-normal: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-    "Helvetica Neue", Arial, sans-serif;
-  --font-monospace: ui-monospace, Menlo, Monaco, "Cascadia Mono",
-    "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace",
-    "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+const DARK_THEME_CSS = `/* dark theme css */
+    --background: #090b11;
+    --error-text: #f49090;
+    --error-text-hover: #ffaaaa;
+    --title-text: #ffffff;
+    --box-background: #141925;
+    --box-background-hover: #2e333f;
+    --hint-text: #a3acc8;
+    --hint-text-hover: #bdc6e2;
+    --border: #283044;
+    --accent: #c490f4;
+    --accent-hover: #deaaff;
+    --stack-text: #c3cadb;
+    --misc-text: #8490b5;
 
-  /* Borders */
-  --roundiness: 4px;
+    --houston-overlay: linear-gradient(
+      180deg,
+      rgba(9, 11, 17, 0) 3.95%,
+      rgba(9, 11, 17, 0.0086472) 9.68%,
+      rgba(9, 11, 17, 0.03551) 15.4%,
+      rgba(9, 11, 17, 0.0816599) 21.13%,
+      rgba(9, 11, 17, 0.147411) 26.86%,
+      rgba(9, 11, 17, 0.231775) 32.58%,
+      rgba(9, 11, 17, 0.331884) 38.31%,
+      rgba(9, 11, 17, 0.442691) 44.03%,
+      rgba(9, 11, 17, 0.557309) 49.76%,
+      rgba(9, 11, 17, 0.668116) 55.48%,
+      rgba(9, 11, 17, 0.768225) 61.21%,
+      rgba(9, 11, 17, 0.852589) 66.93%,
+      rgba(9, 11, 17, 0.91834) 72.66%,
+      rgba(9, 11, 17, 0.96449) 78.38%,
+      rgba(9, 11, 17, 0.991353) 84.11%,
+      #090b11 89.84%
+    );
 
+    /* Syntax Highlighting */
+    --shiki-color-text: #ffffff;
+    --shiki-token-constant: #90f4e3;
+    --shiki-token-string: #f4cf90;
+    --shiki-token-comment: #8490b5;
+    --shiki-token-keyword: var(--accent);
+    --shiki-token-parameter: #aa0000;
+    --shiki-token-function: #90f4e3;
+    --shiki-token-string-expression: #f4cf90;
+    --shiki-token-punctuation: #ffffff;
+    --shiki-token-link: #ee0000;
+`;
+
+const LIGHT_THEME_CSS = ` /* light theme css */
   /* Colors */
   --background: #ffffff;
   --error-text: #ba1212;
@@ -71,58 +104,36 @@ const style = /* css */ `
   --shiki-token-function: #4ca48f;
   --shiki-token-string-expression: #9f722a;
   --shiki-token-punctuation: #ffffff;
-  --shiki-token-link: #ee0000;
+  --shiki-token-link: #ee0000;`;
+
+const style = /* css */ `
+* {
+  box-sizing: border-box;
 }
 
-@media (prefers-color-scheme: dark) {
-  :host {
-    --background: #090b11;
-    --error-text: #f49090;
-    --error-text-hover: #ffaaaa;
-    --title-text: #ffffff;
-    --box-background: #141925;
-    --box-background-hover: #2e333f;
-    --hint-text: #a3acc8;
-    --hint-text-hover: #bdc6e2;
-    --border: #283044;
-    --accent: #c490f4;
-    --accent-hover: #deaaff;
-    --stack-text: #c3cadb;
-    --misc-text: #8490b5;
+:host {
+  /** Needed so Playwright can find the element */
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99999;
 
-    --houston-overlay: linear-gradient(
-      180deg,
-      rgba(9, 11, 17, 0) 3.95%,
-      rgba(9, 11, 17, 0.0086472) 9.68%,
-      rgba(9, 11, 17, 0.03551) 15.4%,
-      rgba(9, 11, 17, 0.0816599) 21.13%,
-      rgba(9, 11, 17, 0.147411) 26.86%,
-      rgba(9, 11, 17, 0.231775) 32.58%,
-      rgba(9, 11, 17, 0.331884) 38.31%,
-      rgba(9, 11, 17, 0.442691) 44.03%,
-      rgba(9, 11, 17, 0.557309) 49.76%,
-      rgba(9, 11, 17, 0.668116) 55.48%,
-      rgba(9, 11, 17, 0.768225) 61.21%,
-      rgba(9, 11, 17, 0.852589) 66.93%,
-      rgba(9, 11, 17, 0.91834) 72.66%,
-      rgba(9, 11, 17, 0.96449) 78.38%,
-      rgba(9, 11, 17, 0.991353) 84.11%,
-      #090b11 89.84%
-    );
+  /* Fonts */
+  --font-normal: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", Arial, sans-serif;
+  --font-monospace: ui-monospace, Menlo, Monaco, "Cascadia Mono",
+    "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace",
+    "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 
-    /* Syntax Highlighting */
-    --shiki-color-text: #ffffff;
-    --shiki-token-constant: #90f4e3;
-    --shiki-token-string: #f4cf90;
-    --shiki-token-comment: #8490b5;
-    --shiki-token-keyword: var(--accent);
-    --shiki-token-parameter: #aa0000;
-    --shiki-token-function: #90f4e3;
-    --shiki-token-string-expression: #f4cf90;
-    --shiki-token-punctuation: #ffffff;
-    --shiki-token-link: #ee0000;
-  }
+  /* Borders */
+  --roundiness: 4px;
+
+  \${prioritaryThemeCss}
 }
+  \${maybeDarkThemeMediaCss}
 
 #backdrop {
   font-family: var(--font-monospace);
@@ -274,10 +285,10 @@ const style = /* css */ `
 }
 
 .link button {
-	background: none;
-	border: none;
-	font-size: inherit;
-	font-family: inherit;
+  background: none;
+  border: none;
+  font-size: inherit;
+  font-family: inherit;
 }
 
 .link a, .link button {
@@ -386,7 +397,7 @@ const style = /* css */ `
 
 const overlayTemplate = /* html */ `
 <style>
-${style.trim()}
+${style}
 </style>
 <div id="backdrop">
   <div id="layout">
@@ -416,12 +427,12 @@ ${style.trim()}
       </section>
     </section>
 
-		<section id="code">
-			<header>
-				<h2></h2>
-			</header>
-			<div id="code-content"></div>
-		</section>
+    <section id="code">
+      <header>
+        <h2></h2>
+      </header>
+      <div id="code-content"></div>
+    </section>
 
     <section id="stack">
       <h2>Stack Trace</h2>
@@ -443,6 +454,7 @@ class ErrorOverlay extends HTMLElement {
 	constructor(err: AstroErrorPayload['err']) {
 		super();
 		this.root = this.attachShadow({ mode: 'open' });
+
 		this.root.innerHTML = overlayTemplate;
 
 		this.text('#name', err.name);
@@ -552,14 +564,35 @@ class ErrorOverlay extends HTMLElement {
 	}
 }
 
-function getOverlayCode() {
+function getOverlayCode(theme: Theme) {
+	let prioritaryThemeCss = '',
+		maybeDarkThemeMediaCss = '';
+	switch (theme) {
+		case 'light':
+			prioritaryThemeCss = LIGHT_THEME_CSS;
+			break;
+		case 'dark':
+			prioritaryThemeCss = DARK_THEME_CSS;
+			break;
+		case 'system':
+			prioritaryThemeCss = LIGHT_THEME_CSS;
+			maybeDarkThemeMediaCss = wrapDarkColorSchemeMedia(wrapHostSelector(DARK_THEME_CSS));
+			break;
+		default:
+			throw new Error(`Invalid theme: ${theme}`);
+	}
+
 	return `
-		const overlayTemplate = \`${overlayTemplate}\`;
-		const openNewWindowIcon = \`${openNewWindowIcon}\`;
-		${ErrorOverlay.toString()}
+  const prioritaryThemeCss = \`${prioritaryThemeCss}\`;
+  const maybeDarkThemeMediaCss = \`${maybeDarkThemeMediaCss}\`;
+  const overlayTemplate = \`${overlayTemplate}\`;
+  const openNewWindowIcon = \`${openNewWindowIcon}\`;
+  ${ErrorOverlay.toString()}
 	`;
 }
-
 export function patchOverlay(code: string, config: AstroConfig) {
-	return code.replace('class ErrorOverlay', getOverlayCode() + '\nclass ViteErrorOverlay');
+	return code.replace(
+		'class ErrorOverlay',
+		getOverlayCode(config.errorOverlayTheme) + '\nclass ViteErrorOverlay'
+	);
 }