feat: Opt-out Error page from dark scheme color #36951

icyJoseph · 2022-05-16T15:34:49Z

Feature

Implements this feature request: #36949

Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
Documentation added

Documentation / Examples

Make sure the linting passes by running yarn lint

packages/next/pages/_error.tsx

ijjk · 2022-05-17T18:15:24Z

Failing test suites

Commit: 7c27b7e

yarn testheadless test/integration/cli/test/index.test.js

CLI Usage > info > should print output

Expand output

● CLI Usage › info › should print output

expect(received).toBe(expected) // Object.is equality

Expected: ""
Received: "warn  - Latest canary version not detected, detected: \"12.1.7-canary.6\", newest: \"12.1.7-canary.7\".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue
"

  496 |       // warning will show so skip this check for the stable release
  497 |       if (pkg.version.includes('-canary')) {
> 498 |         expect(info.stderr || '').toBe('')
      |                                   ^
  499 |       }
  500 |       expect(info.stdout).toMatch(
  501 |         new RegExp(`

  at Object.<anonymous> (integration/cli/test/index.test.js:498:35)

Read more about building and testing Next.js in contributing.md.

ijjk · 2022-05-17T18:32:30Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	icyJoseph/next.js feat/opt-out-error-dark-mode	Change
buildDuration	17.8s	17.7s	-116ms
buildDurationCached	7s	6.8s	-103ms
nodeModulesSize	479 MB	479 MB	⚠️ +159 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	icyJoseph/next.js feat/opt-out-error-dark-mode	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.907	4.837	-0.07
/ avg req/sec	509.48	516.84	+7.36
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.99	1.884	-0.11
/error-in-render avg req/sec	1256.01	1327	+70.99

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	icyJoseph/next.js feat/opt-out-error-dark-mode	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	29 kB	29 kB	⚠️ +32 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72.6 kB	72.7 kB	⚠️ +32 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	icyJoseph/next.js feat/opt-out-error-dark-mode	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	icyJoseph/next.js feat/opt-out-error-dark-mode	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	308 B	308 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.71 kB	2.71 kB	✓
head-HASH.js gzip	359 B	359 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.73 kB	5.73 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.65 kB	2.65 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	391 B	391 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16 kB	16 kB	✓

Client Build Manifests

	vercel/next.js canary	icyJoseph/next.js feat/opt-out-error-dark-mode	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	icyJoseph/next.js feat/opt-out-error-dark-mode	Change
index.html gzip	532 B	532 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	527 B	528 B	⚠️ +1 B
Overall change	1.6 kB	1.61 kB	⚠️ +1 B

Diffs

Diff for main-HASH.js

@@ -3581,7 +3581,10 @@
           {
             key: "render",
             value: function render() {
-              var statusCode = this.props.statusCode;
+              var _props = this.props,
+                statusCode = _props.statusCode,
+                _withDarkMode = _props.withDarkMode,
+                withDarkMode = _withDarkMode === void 0 ? true : _withDarkMode;
               var title =
                 this.props.title ||
                 statusCodes[statusCode] ||
@@ -3607,8 +3610,11 @@
                   null,
                   /*#__PURE__*/ _react.default.createElement("style", {
                     dangerouslySetInnerHTML: {
-                      __html:
-                        "\n                body { margin: 0; color: #000; background: #fff; }\n                .next-error-h1 {\n                  border-right: 1px solid rgba(0, 0, 0, .3);\n                }\n                @media (prefers-color-scheme: dark) {\n                  body { color: #fff; background: #000; }\n                  .next-error-h1 {\n                    border-right: 1px solid rgba(255, 255, 255, .3);\n                  }\n                }"
+                      __html: "\n                body { margin: 0; color: #000; background: #fff; }\n                .next-error-h1 {\n                  border-right: 1px solid rgba(0, 0, 0, .3);\n                }\n                \n                ".concat(
+                        withDarkMode
+                          ? "@media (prefers-color-scheme: dark) {\n                  body { color: #fff; background: #000; }\n                  .next-error-h1 {\n                    border-right: 1px solid rgba(255, 255, 255, .3);\n                  }\n                }"
+                          : ""
+                      )
                     }
                   }),
                   statusCode

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-62e5c333d536c665.js"
+      src="/_next/static/chunks/main-d39b128be27dbb18.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-62e5c333d536c665.js"
+      src="/_next/static/chunks/main-d39b128be27dbb18.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-62e5c333d536c665.js"
+      src="/_next/static/chunks/main-d39b128be27dbb18.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	icyJoseph/next.js feat/opt-out-error-dark-mode	Change
buildDuration	20.3s	20.3s	⚠️ +10ms
buildDurationCached	6.7s	6.7s	⚠️ +57ms
nodeModulesSize	479 MB	479 MB	⚠️ +159 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	icyJoseph/next.js feat/opt-out-error-dark-mode	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.799	4.802	0
/ avg req/sec	520.94	520.63	⚠️ -0.31
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.884	1.892	⚠️ +0.01
/error-in-render avg req/sec	1326.89	1321.01	⚠️ -5.88

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	icyJoseph/next.js feat/opt-out-error-dark-mode	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.7 kB	42.7 kB	✓
main-HASH.js gzip	29.4 kB	29.5 kB	⚠️ +26 B
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	73.7 kB	73.8 kB	⚠️ +26 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	icyJoseph/next.js feat/opt-out-error-dark-mode	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	icyJoseph/next.js feat/opt-out-error-dark-mode	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	311 B	311 B	✓
css-HASH.js gzip	324 B	324 B	✓
dynamic-HASH.js gzip	2.89 kB	2.89 kB	✓
head-HASH.js gzip	357 B	357 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.82 kB	5.82 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.78 kB	2.78 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.3 kB	16.3 kB	✓

Client Build Manifests

	vercel/next.js canary	icyJoseph/next.js feat/opt-out-error-dark-mode	Change
_buildManifest.js gzip	457 B	457 B	✓
Overall change	457 B	457 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	icyJoseph/next.js feat/opt-out-error-dark-mode	Change
index.html gzip	532 B	532 B	✓
link.html gzip	547 B	546 B	-1 B
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	-1 B

Diffs

Diff for main-HASH.js

@@ -3581,7 +3581,10 @@
           {
             key: "render",
             value: function render() {
-              var statusCode = this.props.statusCode;
+              var _props = this.props,
+                statusCode = _props.statusCode,
+                _withDarkMode = _props.withDarkMode,
+                withDarkMode = _withDarkMode === void 0 ? true : _withDarkMode;
               var title =
                 this.props.title ||
                 statusCodes[statusCode] ||
@@ -3607,8 +3610,11 @@
                   null,
                   /*#__PURE__*/ _react.default.createElement("style", {
                     dangerouslySetInnerHTML: {
-                      __html:
-                        "\n                body { margin: 0; color: #000; background: #fff; }\n                .next-error-h1 {\n                  border-right: 1px solid rgba(0, 0, 0, .3);\n                }\n                @media (prefers-color-scheme: dark) {\n                  body { color: #fff; background: #000; }\n                  .next-error-h1 {\n                    border-right: 1px solid rgba(255, 255, 255, .3);\n                  }\n                }"
+                      __html: "\n                body { margin: 0; color: #000; background: #fff; }\n                .next-error-h1 {\n                  border-right: 1px solid rgba(0, 0, 0, .3);\n                }\n                \n                ".concat(
+                        withDarkMode
+                          ? "@media (prefers-color-scheme: dark) {\n                  body { color: #fff; background: #000; }\n                  .next-error-h1 {\n                    border-right: 1px solid rgba(255, 255, 255, .3);\n                  }\n                }"
+                          : ""
+                      )
                     }
                   }),
                   statusCode

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-62e5c333d536c665.js"
+      src="/_next/static/chunks/main-d39b128be27dbb18.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-62e5c333d536c665.js"
+      src="/_next/static/chunks/main-d39b128be27dbb18.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-62e5c333d536c665.js"
+      src="/_next/static/chunks/main-d39b128be27dbb18.js"
       defer=""
     ></script>
     <script

Commit: 8b684ee

icyJoseph · 2022-05-17T19:57:57Z

Failing test suites

Commit: 7c27b7e

yarn testheadless test/integration/cli/test/index.test.js

CLI Usage > info > should print output

Expand output
Read more about building and testing Next.js in contributing.md.

Looks like this came from the canary branch? Using the latest HEAD, I don't see the issue anymore.

feat: Opt-out Error page from dark scheme color

b5b25ac

icyJoseph requested review from timneutkens, ijjk, shuding and huozhi as code owners May 16, 2022 15:34

ijjk added the type: next label May 16, 2022

icyJoseph added 3 commits May 16, 2022 19:47

Merge branch 'canary' into feat/opt-out-error-dark-mode

800d642

Merge branch 'canary' into feat/opt-out-error-dark-mode

c8d9083

Merge branch 'canary' into feat/opt-out-error-dark-mode

7c27b7e

ijjk reviewed May 17, 2022

View reviewed changes

packages/next/pages/_error.tsx Show resolved Hide resolved

Merge branch 'canary' into feat/opt-out-error-dark-mode

1bf5030

icyJoseph and others added 3 commits May 17, 2022 22:01

fix: Narrow withDarkMode to the media-query

039fe22

Merge branch 'canary' into feat/opt-out-error-dark-mode

e975e69

Merge branch 'canary' into feat/opt-out-error-dark-mode

8b684ee

ijjk approved these changes May 22, 2022

View reviewed changes

ijjk merged commit 8bdee98 into vercel:canary May 22, 2022

github-actions bot locked as resolved and limited conversation to collaborators Jun 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Opt-out Error page from dark scheme color #36951

feat: Opt-out Error page from dark scheme color #36951

icyJoseph commented May 16, 2022 •

edited

Loading

ijjk commented May 17, 2022

ijjk commented May 17, 2022 •

edited

Loading

Diffs

Diffs

icyJoseph commented May 17, 2022

Failing test suites

feat: Opt-out Error page from dark scheme color #36951

feat: Opt-out Error page from dark scheme color #36951

Conversation

icyJoseph commented May 16, 2022 • edited Loading

Feature

Documentation / Examples

ijjk commented May 17, 2022

Failing test suites

ijjk commented May 17, 2022 • edited Loading

Stats from current PR

Diffs

Diffs

icyJoseph commented May 17, 2022

Failing test suites

icyJoseph commented May 16, 2022 •

edited

Loading

ijjk commented May 17, 2022 •

edited

Loading