Add errorOverlayTheme option to Astro config

.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'
+});
+```

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

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