feat(demo): dark color scheme

derived from playwright html reporter
davidenke · Nov 12, 2024 · 477b209 · 477b209
1 parent d16e8a0
commit 477b209
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
     />
+    <meta name="color-scheme" content="dark light" />
     <title>Astro Decap Collection Demo</title>
 
     <link rel="stylesheet" href="./src/demo/demo.css" />

diff --git a/src/demo/demo.css b/src/demo/demo.css
@@ -1,6 +1,34 @@
+:root {
+  --color-fg-default: #24292f;
+  --color-fg-muted: #57606a;
+  --color-fg-subtle: #6e7781;
+  --color-border-default: #d0d7de;
+  --color-canvas-default: #fff;
+  --color-canvas-subtle: #f6f8fa;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-fg-default: #c9d1d9;
+    --color-fg-muted: #8b949e;
+    --color-fg-subtle: #484f58;
+    --color-border-default: #30363d;
+    --color-canvas-default: #0d1117;
+    --color-canvas-subtle: #161b22;
+  }
+}
+
+html,
+body {
+  overscroll-behavior-x: none;
+}
+
 html {
-  font-family: system-ui;
+  color: var(--color-fg-default);
   font-size: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji';
+  -webkit-font-smoothing: antialiased;
 }
 
 body,
@@ -97,22 +125,30 @@ fieldset {
 
 button,
 legend,
-code::after {
+code::after,
+[data-label]::before {
   font: 0.8em/1 system-ui;
-  text-transform: uppercase;
   white-space: nowrap;
 }
 
+button,
+legend,
+code::after {
+  text-transform: uppercase;
+}
+
 button {
   padding: 10px 15px;
   border-radius: 3px;
-  background: #ccc;
+  background: var(--color-border-default);
+  color: var(--color-fg-default);
 
   font-size: inherit;
   cursor: pointer;
 
   &:hover {
-    background-color: #dcdcdc;
+    background: var(--color-canvas-subtle);
+    color: var(--color-fg-muted);
   }
 }
 
@@ -138,7 +174,7 @@ pre {
 textarea,
 code {
   padding: 10px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--color-fg-subtle);
   border-radius: 6px;
   font: 1em/1.5 monospace;
 }
@@ -181,7 +217,8 @@ pre {
     padding: 3px 5px;
 
     border-radius: 3px;
-    background: #ccc;
+    background: var(--color-canvas-default);
+    border: 1px solid var(--color-fg-subtle);
     pointer-events: none;
   }
 }
@@ -206,7 +243,7 @@ pre {
 
     overflow: auto;
 
-    border: 1px solid #ccc;
+    border: 1px solid var(--color-fg-subtle);
     border-radius: 6px;
 
     code {
@@ -230,7 +267,7 @@ pre {
     caret-color: #000;
 
     &:focus {
-      outline: 1px solid #ccc;
+      outline: 1px solid var(--color-fg-subtle);
       outline-offset: -2px;
     }
   }