add automatic dark mode

1 files changed, 40 insertions, 5 deletions

diff --git a/template.html b/template.html
index ad1811c..51568e2 100644
--- a/template.html
+++ b/template.html
@@ -17,6 +17,18 @@
       --danger: #cf222e;
       --radius: 3px;
     }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --bg: #0d1117;
+        --card-bg: #161b22;
+        --border: #30363d;
+        --text: #c9d1d9;
+        --muted: #8b949e;
+        --primary: #238636;     /* slightly adjusted for dark background visibility */
+        --primary-hover: #2ea043;
+        --danger: #f85149;
+      }
+    }
 
     * {
       box-sizing: border-box;
@@ -38,6 +50,11 @@
 
     a {
       word-break: break-all;
+      color: var(--primary);
+    }
+
+    a:hover {
+      text-decoration: underline;
     }
 
     .container {
@@ -89,6 +106,29 @@
       border-radius: var(--radius);
       border: 1px solid var(--border);
       font-size: 0.95rem;
+      background: var(--card-bg);
+      color: var(--text);
+    }
+
+    input[type="file"],
+    input[type="text"] {
+      margin-top: 0.5rem;
+      background: var(--card-bg);
+      color: var(--text);
+      border: 1px solid var(--border);
+      padding: 0.5rem;
+      border-radius: var(--radius);
+    }
+
+    input[type="file"]::file-selector-button {
+      background: var(--primary);
+      color: white;
+      border: none;
+      padding: 0.5rem 1rem;
+      border-radius: var(--radius);
+      font-weight: 600;
+      cursor: pointer;
+      margin-right: 0.75rem;
     }
 
     textarea:focus,
@@ -97,11 +137,6 @@
       border-color: #0969da;
     }
 
-    input[type="file"],
-    input[type="text"] {
-      margin-top: 0.5rem;
-    }
-
     .submit-row {
       display: flex;
       gap: 1rem;