add dark mode styles to default error page

Rich Harris · Rich Harris · commit 8cab7d815020 · 2023-03-20T12:55:49.000-04:00
diff --git a/.changeset/tasty-comics-give.md b/.changeset/tasty-comics-give.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': minor
+---
+
+feat: add dark mode styles to default error page
diff --git a/packages/kit/src/core/config/default-error.html b/packages/kit/src/core/config/default-error.html
@@ -6,6 +6,11 @@
 
 		<style>
 			body {
+				--bg: white;
+				--fg: #222;
+				--divider: #ccc;
+				background: var(--bg);
+				color: var(--fg);
 				font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 					Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 				display: flex;
@@ -30,7 +35,7 @@
 			}
 
 			.message {
-				border-left: 1px solid #ccc;
+				border-left: 1px solid var(--divider);
 				padding: 0 0 0 1rem;
 				margin: 0 0 0 1rem;
 				min-height: 2.5rem;
@@ -43,6 +48,14 @@
 				font-size: 1em;
 				margin: 0;
 			}
+
+			@media (prefers-color-scheme: dark) {
+				body {
+					--bg: #222;
+					--fg: #ddd;
+					--divider: #666;
+				}
+			}
 		</style>
 	</head>
 	<body>
