feat: Opt-out Error page from dark scheme color by icyJoseph · Pull Request #36951 · vercel/next.js

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

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 huozhi, ijjk, shuding and timneutkens 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

Comment thread packages/next/pages/_error.tsx

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
ijjk merged 8 commits intovercel:canaryfrom
icyJoseph:feat/opt-out-error-dark-mode

icyJoseph commented May 16, 2022 •

edited

Loading

Uh oh!

Uh oh!

ijjk commented May 17, 2022

Uh oh!

ijjk commented May 17, 2022 •

edited

Loading

Diffs

Diffs

Uh oh!

icyJoseph commented May 17, 2022

Failing test suites

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

icyJoseph commented May 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Feature

Documentation / Examples

Uh oh!

Uh oh!

ijjk commented May 17, 2022

Failing test suites

Uh oh!

ijjk commented May 17, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Stats from current PR

Diffs

Diffs

Uh oh!

icyJoseph commented May 17, 2022

Failing test suites

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

icyJoseph commented May 16, 2022 •

edited

Loading

ijjk commented May 17, 2022 •

edited

Loading