From 8bdee983e09457571c4829b6aed63ceae7c8b6bc Mon Sep 17 00:00:00 2001
From: Joseph <sephxd1234@gmail.com>
Date: Sun, 22 May 2022 05:35:17 +0200
Subject: [PATCH] feat: Opt-out Error page from dark scheme color (#36951)

* feat: Opt-out Error page from dark scheme color

* fix: Narrow `withDarkMode` to the media-query

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

diff --git a/packages/next/pages/_error.tsx b/packages/next/pages/_error.tsx
index 6afa6e299ef28..323aa0a8fe1f8 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] ||
@@ -56,14 +57,20 @@ export default class Error<P = {}> extends React.Component<P & ErrorProps> {
                 .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);
                   }
+                }`
+                    : ''
                 }`,
             }}
           />
+
           {statusCode ? (
             <h1 className="next-error-h1" style={styles.h1}>
               {statusCode}