From 2c68e5e7392cad80068589e58a149ae9a23be3a6 Mon Sep 17 00:00:00 2001
From: Alex Page <hi@alexpage.dev>
Date: Fri, 15 Apr 2022 22:05:48 -0700
Subject: [PATCH] 404 page - Responsive color scheme (#32113)

* Responsive color scheme 404 page

* correct styles

* typo

* consistent spacing

Co-authored-by: JJ Kasper <jj@jjsweb.site>
---
 packages/next/pages/_error.tsx | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/next/pages/_error.tsx b/packages/next/pages/_error.tsx
index 4ce82ff780e5636..0e2449dd1b1353f 100644
--- a/packages/next/pages/_error.tsx
+++ b/packages/next/pages/_error.tsx
@@ -52,8 +52,26 @@ export default class Error<P = {}> extends React.Component<P & ErrorProps> {
           </Head>
         )}
         <div>
-          <style dangerouslySetInnerHTML={{ __html: 'body { margin: 0 }' }} />
-          {statusCode ? <h1 style={styles.h1}>{statusCode}</h1> : null}
+          <style
+            dangerouslySetInnerHTML={{
+              __html: `
+                body { margin: 0; color: #000; background: #fff; }
+                .next-error-h1 {
+                  border-right: 1px solid rgba(0, 0, 0, .3);
+                }
+                @media (prefers-color-scheme: dark) {
+                  body { color: #fff; background: #000; }
+                  .next-error-h1 {
+                    border-right: 1px solid rgba(255, 255, 255, .3);
+                  }
+                }`,
+            }}
+          />
+          {statusCode ? (
+            <h1 className="next-error-h1" style={styles.h1}>
+              {statusCode}
+            </h1>
+          ) : null}
           <div style={styles.desc}>
             <h2 style={styles.h2}>
               {this.props.title || statusCode ? (
@@ -75,8 +93,6 @@ export default class Error<P = {}> extends React.Component<P & ErrorProps> {
 
 const styles: { [k: string]: React.CSSProperties } = {
   error: {
-    color: '#000',
-    background: '#fff',
     fontFamily:
       '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
     height: '100vh',
@@ -97,7 +113,6 @@ const styles: { [k: string]: React.CSSProperties } = {
 
   h1: {
     display: 'inline-block',
-    borderRight: '1px solid rgba(0, 0, 0,.3)',
     margin: 0,
     marginRight: '20px',
     padding: '10px 23px 10px 0',