chore: add dark mode for dev overlay (#48601)

This PR adds a dark mode to the error overlay which respects the browsers color scheme. I just did this because I was blinded by the dev overlay a lot today and thought this change might be appreciated. Screenshot (dark mode): <img width="2056" alt="image" src="https://user-images.githubusercontent.com/17279485/233201837-0d005e10-d73f-4ddd-9f4a-285829ec63b1.png"> Screenshot (retained light mode): <img width="1064" alt="image" src="https://user-images.githubusercontent.com/17279485/233202019-83ec79d8-d2ca-44c8-bc0a-7696355dfe72.png"> Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
vercel · Jun 14, 2023 · d4c2335 · d4c2335
1 parent 28dca13
commit d4c2335
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 8 deletions.
diff --git a/packages/react-dev-overlay/src/internal/components/Dialog/styles.ts b/packages/react-dev-overlay/src/internal/components/Dialog/styles.ts
@@ -8,7 +8,7 @@ const styles = css`
     margin-right: auto;
     margin-left: auto;
     outline: none;
-    background: white;
+    background: var(--color-background);
     border-radius: var(--size-gap);
     box-shadow: 0 var(--size-gap-half) var(--size-gap-double)
       rgba(0, 0, 0, 0.25);

diff --git a/packages/react-dev-overlay/src/internal/components/LeftRightDialogHeader/styles.ts b/packages/react-dev-overlay/src/internal/components/LeftRightDialogHeader/styles.ts
@@ -52,6 +52,8 @@ const styles = css`
 
     opacity: 0.4;
     transition: opacity 0.25s ease;
+
+    color: var(--color-font);
   }
   [data-nextjs-dialog-left-right] > button:last-of-type:hover {
     opacity: 0.7;

diff --git a/packages/react-dev-overlay/src/internal/components/Overlay/styles.tsx b/packages/react-dev-overlay/src/internal/components/Overlay/styles.tsx
@@ -29,7 +29,7 @@ const styles = css`
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: rgba(17, 17, 17, 0.2);
+    background-color: var(--color-backdrop);
     pointer-events: all;
     z-index: -1;
   }

diff --git a/packages/react-dev-overlay/src/internal/container/BuildError.tsx b/packages/react-dev-overlay/src/internal/container/BuildError.tsx
@@ -59,6 +59,6 @@ export const styles = css`
   }
 
   .nextjs-container-build-error-body small {
-    color: #757575;
+    color: var(--color-font);
   }
 `
diff --git a/packages/react-dev-overlay/src/internal/container/RuntimeError.tsx b/packages/react-dev-overlay/src/internal/container/RuntimeError.tsx
@@ -196,18 +196,17 @@ export const styles = css`
     margin-top: 0;
     margin-bottom: var(--size-gap);
     font-family: var(--font-stack-monospace);
-    font-size: var(--size-font);
-    color: #222;
+    color: var(--color-stack-h6);
   }
   [data-nextjs-call-stack-frame] > h3[data-nextjs-frame-expanded='false'] {
-    color: #666;
+    color: var(--color-stack-headline);
   }
   [data-nextjs-call-stack-frame] > div {
     display: flex;
     align-items: center;
     padding-left: calc(var(--size-gap) + var(--size-gap-half));
     font-size: var(--size-font-small);
-    color: #999;
+    color: var(--color-stack-subline);
   }
   [data-nextjs-call-stack-frame] > div > svg {
     width: auto;

diff --git a/packages/react-dev-overlay/src/internal/styles/Base.tsx b/packages/react-dev-overlay/src/internal/styles/Base.tsx
@@ -17,6 +17,14 @@ export function Base() {
           --size-font-big: 20px;
           --size-font-bigger: 24px;
 
+          --color-background: white;
+          --color-font: #757575;
+          --color-backdrop: rgba(17, 17, 17, 0.2);
+
+          --color-stack-h6: #222;
+          --color-stack-headline: #666;
+          --color-stack-subline: #999;
+
           --color-accents-1: #808080;
           --color-accents-2: #222222;
           --color-accents-3: #404040;
@@ -46,6 +54,20 @@ export function Base() {
           --color-ansi-bright-yellow: #ffd966;
         }
 
+        @media (prefers-color-scheme: dark) {
+          :host {
+            --color-background: rgb(28, 28, 30);
+            --color-font: white;
+            --color-backdrop: rgb(44, 44, 46);
+
+            --color-stack-h6: rgb(200, 200, 204);
+            --color-stack-headline: rgb(99, 99, 102);
+            --color-stack-subline: rgba(142, 142, 147);
+
+            --color-accents-3: rgb(118, 118, 118);
+          }
+        }
+
         .mono {
           font-family: var(--font-stack-monospace);
         }

diff --git a/packages/react-dev-overlay/src/internal/styles/CssReset.tsx b/packages/react-dev-overlay/src/internal/styles/CssReset.tsx
@@ -54,7 +54,7 @@ export function CssReset() {
           font-size: 16px;
           font-weight: 400;
           line-height: 1.5;
-          color: #212529;
+          color: var(--color-font);
           text-align: left;
           background-color: #fff;
         }