Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

404 page - Responsive color scheme #32113

Merged
merged 5 commits into from Apr 16, 2022
Merged

404 page - Responsive color scheme #32113

merged 5 commits into from Apr 16, 2022

Conversation

alex-page
Copy link
Contributor

@alex-page alex-page commented Dec 4, 2021

Do you ever mess up your getStaticPaths function late at night and your whole page goes white with a 404 error? Not only is the pain of breaking your getStaticPaths function real but your eyes also get punished by the beautiful white background of the 404 page.

f2lREKu
^ it me

This PR enables dark mode on 404 pages if the user has prefers-color-scheme: dark set in their operating system. The changes in this PR are:

  • Remove the color and background property from .error styles
  • Move the color and background property to the <style> body { that exists in the _error.tsx file
  • Add the @media (prefers-color-scheme: dark) {} for the inverse colors

I have one concern with this approach. I have noticed that styles/globals.css still apply to the body in my application on 404 pages. This could cause conflicts with these styles overriding them. I haven't looked into the specificity or understand the intention of the 404 page styles to know if this is a serious concern.

One way to resolve this is to add a className to the <div> wrapping the errors and apply the <style> to that className instead of the body element.

I couldn't easily test this change but abstracting it into a code pen seemed to work fine.

@ijjk ijjk added the type: next label Dec 4, 2021
@alex-page alex-page changed the title Responsive color scheme 404 page 404 page - Responsive color scheme Dec 4, 2021
Copy link
Member

@ijjk ijjk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR!

@ijjk
Copy link
Member

ijjk commented Apr 16, 2022

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary alex-page/next.js canary Change
buildDuration 15.3s 15.1s -122ms
buildDurationCached 6.1s 6.1s ⚠️ +2ms
nodeModulesSize 485 MB 485 MB ⚠️ +293 B
Page Load Tests Overall increase ✓
vercel/next.js canary alex-page/next.js canary Change
/ failed reqs 0 0
/ total time (seconds) 3.01 2.972 -0.04
/ avg req/sec 830.55 841.08 +10.53
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.171 1.166 -0.01
/error-in-render avg req/sec 2134.33 2144.77 +10.44
Client Bundles (main, webpack) Overall increase ⚠️
vercel/next.js canary alex-page/next.js canary Change
925.HASH.js gzip 179 B 179 B
framework-HASH.js gzip 42 kB 42 kB
main-HASH.js gzip 28.3 kB 28.4 kB ⚠️ +110 B
webpack-HASH.js gzip 1.44 kB 1.44 kB
Overall change 72 kB 72.1 kB ⚠️ +110 B
Legacy Client Bundles (polyfills)
vercel/next.js canary alex-page/next.js canary Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary alex-page/next.js canary Change
_app-HASH.js gzip 1.36 kB 1.36 kB
_error-HASH.js gzip 192 B 192 B
amp-HASH.js gzip 309 B 309 B
css-HASH.js gzip 327 B 327 B
dynamic-HASH.js gzip 3.04 kB 3.04 kB
head-HASH.js gzip 351 B 351 B
hooks-HASH.js gzip 920 B 920 B
image-HASH.js gzip 5.74 kB 5.74 kB
index-HASH.js gzip 263 B 263 B
link-HASH.js gzip 2.36 kB 2.36 kB
routerDirect..HASH.js gzip 320 B 320 B
script-HASH.js gzip 392 B 392 B
withRouter-HASH.js gzip 319 B 319 B
85e02e95b279..7e3.css gzip 107 B 107 B
Overall change 16 kB 16 kB
Client Build Manifests
vercel/next.js canary alex-page/next.js canary Change
_buildManifest.js gzip 461 B 461 B
Overall change 461 B 461 B
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary alex-page/next.js canary Change
index.html gzip 530 B 532 B ⚠️ +2 B
link.html gzip 544 B 545 B ⚠️ +1 B
withRouter.html gzip 524 B 526 B ⚠️ +2 B
Overall change 1.6 kB 1.6 kB ⚠️ +5 B

Diffs

Diff for main-HASH.js
@@ -3533,13 +3533,15 @@
                   null,
                   /*#__PURE__*/ _react.default.createElement("style", {
                     dangerouslySetInnerHTML: {
-                      __html: "body { margin: 0 }"
+                      __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                }"
                     }
                   }),
                   statusCode
                     ? /*#__PURE__*/ _react.default.createElement(
                         "h1",
                         {
+                          className: "next-error-h1",
                           style: styles.h1
                         },
                         statusCode
@@ -3578,8 +3580,6 @@
       Error.origGetInitialProps = _getInitialProps;
       var styles = {
         error: {
-          color: "#000",
-          background: "#fff",
           fontFamily:
             '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
           height: "100vh",
@@ -3598,7 +3598,6 @@
         },
         h1: {
           display: "inline-block",
-          borderRight: "1px solid rgba(0, 0, 0,.3)",
           margin: 0,
           marginRight: "20px",
           padding: "10px 23px 10px 0",
Diff for index.html
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-afb4b7219fe8d317.js"
+      src="/_next/static/chunks/main-f7f95d3518feca5a.js"
       defer=""
     ></script>
     <script
Diff for link.html
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-afb4b7219fe8d317.js"
+      src="/_next/static/chunks/main-f7f95d3518feca5a.js"
       defer=""
     ></script>
     <script
Diff for withRouter.html
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-afb4b7219fe8d317.js"
+      src="/_next/static/chunks/main-f7f95d3518feca5a.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary alex-page/next.js canary Change
buildDuration 17.8s 18.1s ⚠️ +237ms
buildDurationCached 6s 6.1s ⚠️ +44ms
nodeModulesSize 485 MB 485 MB ⚠️ +293 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary alex-page/next.js canary Change
/ failed reqs 0 0
/ total time (seconds) 3.012 3.007 0
/ avg req/sec 829.88 831.35 +1.47
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.144 1.156 ⚠️ +0.01
/error-in-render avg req/sec 2185.2 2162.55 ⚠️ -22.65
Client Bundles (main, webpack) Overall increase ⚠️
vercel/next.js canary alex-page/next.js canary Change
925.HASH.js gzip 178 B 178 B
framework-HASH.js gzip 42.3 kB 42.3 kB
main-HASH.js gzip 28.7 kB 28.9 kB ⚠️ +191 B
webpack-HASH.js gzip 1.45 kB 1.45 kB
Overall change 72.6 kB 72.8 kB ⚠️ +191 B
Legacy Client Bundles (polyfills)
vercel/next.js canary alex-page/next.js canary Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary alex-page/next.js canary Change
_app-HASH.js gzip 1.35 kB 1.35 kB
_error-HASH.js gzip 179 B 179 B
amp-HASH.js gzip 313 B 313 B
css-HASH.js gzip 325 B 325 B
dynamic-HASH.js gzip 3.02 kB 3.02 kB
head-HASH.js gzip 351 B 351 B
hooks-HASH.js gzip 921 B 921 B
image-HASH.js gzip 5.78 kB 5.78 kB
index-HASH.js gzip 261 B 261 B
link-HASH.js gzip 2.44 kB 2.44 kB
routerDirect..HASH.js gzip 322 B 322 B
script-HASH.js gzip 393 B 393 B
withRouter-HASH.js gzip 317 B 317 B
85e02e95b279..7e3.css gzip 107 B 107 B
Overall change 16.1 kB 16.1 kB
Client Build Manifests
vercel/next.js canary alex-page/next.js canary Change
_buildManifest.js gzip 457 B 457 B
Overall change 457 B 457 B
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary alex-page/next.js canary Change
index.html gzip 532 B 532 B
link.html gzip 545 B 546 B ⚠️ +1 B
withRouter.html gzip 526 B 527 B ⚠️ +1 B
Overall change 1.6 kB 1.6 kB ⚠️ +2 B

Diffs

Diff for main-HASH.js
@@ -3533,13 +3533,15 @@
                   null,
                   /*#__PURE__*/ _react.default.createElement("style", {
                     dangerouslySetInnerHTML: {
-                      __html: "body { margin: 0 }"
+                      __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                }"
                     }
                   }),
                   statusCode
                     ? /*#__PURE__*/ _react.default.createElement(
                         "h1",
                         {
+                          className: "next-error-h1",
                           style: styles.h1
                         },
                         statusCode
@@ -3578,8 +3580,6 @@
       Error.origGetInitialProps = _getInitialProps;
       var styles = {
         error: {
-          color: "#000",
-          background: "#fff",
           fontFamily:
             '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
           height: "100vh",
@@ -3598,7 +3598,6 @@
         },
         h1: {
           display: "inline-block",
-          borderRight: "1px solid rgba(0, 0, 0,.3)",
           margin: 0,
           marginRight: "20px",
           padding: "10px 23px 10px 0",
Diff for index.html
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-afb4b7219fe8d317.js"
+      src="/_next/static/chunks/main-f7f95d3518feca5a.js"
       defer=""
     ></script>
     <script
Diff for link.html
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-afb4b7219fe8d317.js"
+      src="/_next/static/chunks/main-f7f95d3518feca5a.js"
       defer=""
     ></script>
     <script
Diff for withRouter.html
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-afb4b7219fe8d317.js"
+      src="/_next/static/chunks/main-f7f95d3518feca5a.js"
       defer=""
     ></script>
     <script
Commit: d015ffb

@ijjk ijjk merged commit 3130ed7 into vercel:canary Apr 16, 2022
SukkaW pushed a commit to SukkaW/next.js that referenced this pull request Apr 18, 2022
* Responsive color scheme 404 page

* correct styles

* typo

* consistent spacing

Co-authored-by: JJ Kasper <jj@jjsweb.site>
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 16, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants