From 477b2096da671a7dba70bf85e1fc7490cac078d3 Mon Sep 17 00:00:00 2001
From: David Enke <david@enke.dev>
Date: Tue, 12 Nov 2024 21:35:30 +0100
Subject: [PATCH] feat(demo): dark color scheme

derived from playwright html reporter
---
 index.html        |  1 +
 src/demo/demo.css | 55 +++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 36969de..467911a 100644
--- 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
index 18463d0..1460bc4 100644
--- 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;
     }
   }