From b5b25ace4933523af063bfb0f5bdc6d57c4e40ff Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Mon, 16 May 2022 17:31:27 +0200
Subject: [PATCH 1/2] feat: Opt-out Error page from dark scheme color

---
 packages/next/pages/_error.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/next/pages/_error.tsx b/packages/next/pages/_error.tsx
index 6afa6e299ef28..05e138ac20297 100644
--- a/packages/next/pages/_error.tsx
+++ b/packages/next/pages/_error.tsx
@@ -12,6 +12,7 @@ const statusCodes: { [code: number]: string } = {
 export type ErrorProps = {
   statusCode: number
   title?: string
+  withDarkMode?: boolean
 }
 
 function _getInitialProps({
@@ -33,7 +34,7 @@ export default class Error<P = {}> extends React.Component<P & ErrorProps> {
   static origGetInitialProps = _getInitialProps
 
   render() {
-    const { statusCode } = this.props
+    const { statusCode, withDarkMode = true } = this.props
     const title =
       this.props.title ||
       statusCodes[statusCode] ||
@@ -49,9 +50,10 @@ export default class Error<P = {}> extends React.Component<P & ErrorProps> {
           </title>
         </Head>
         <div>
-          <style
-            dangerouslySetInnerHTML={{
-              __html: `
+          {withDarkMode ? (
+            <style
+              dangerouslySetInnerHTML={{
+                __html: `
                 body { margin: 0; color: #000; background: #fff; }
                 .next-error-h1 {
                   border-right: 1px solid rgba(0, 0, 0, .3);
@@ -62,8 +64,11 @@ export default class Error<P = {}> extends React.Component<P & ErrorProps> {
                     border-right: 1px solid rgba(255, 255, 255, .3);
                   }
                 }`,
-            }}
-          />
+              }}
+            />
+          ) : (
+            <style dangerouslySetInnerHTML={{ __html: 'body { margin: 0 }' }} />
+          )}
           {statusCode ? (
             <h1 className="next-error-h1" style={styles.h1}>
               {statusCode}

From 039fe2250d662fad8ea40f6ee4c0f042b96b8851 Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Tue, 17 May 2022 22:01:38 +0200
Subject: [PATCH 2/2] fix: Narrow `withDarkMode` to the media-query

---
 packages/next/pages/_error.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/next/pages/_error.tsx b/packages/next/pages/_error.tsx
index 05e138ac20297..323aa0a8fe1f8 100644
--- a/packages/next/pages/_error.tsx
+++ b/packages/next/pages/_error.tsx
@@ -50,25 +50,27 @@ export default class Error<P = {}> extends React.Component<P & ErrorProps> {
           </title>
         </Head>
         <div>
-          {withDarkMode ? (
-            <style
-              dangerouslySetInnerHTML={{
-                __html: `
+          <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) {
+                
+                ${
+                  withDarkMode
+                    ? `@media (prefers-color-scheme: dark) {
                   body { color: #fff; background: #000; }
                   .next-error-h1 {
                     border-right: 1px solid rgba(255, 255, 255, .3);
                   }
+                }`
+                    : ''
                 }`,
-              }}
-            />
-          ) : (
-            <style dangerouslySetInnerHTML={{ __html: 'body { margin: 0 }' }} />
-          )}
+            }}
+          />
+
           {statusCode ? (
             <h1 className="next-error-h1" style={styles.h1}>
               {statusCode}