feat(web): add proper dark mode

Romelium · Feb 17, 2025 · 16ca1ca · 16ca1ca
1 parent 162a6fe
commit 16ca1ca
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 7 deletions.
diff --git a/web/public/examples.css b/web/public/examples.css
@@ -47,6 +47,16 @@ h2 {
 }
 
 @media (prefers-color-scheme: dark) {
+    .example img {
+        border-color: #666;
+    }
+    .example p {
+        color: #ddd;
+    }
+
+    .example p span {
+        color: #ccc;
+    }
     .binary-img {
         background-color: white;
     }

diff --git a/web/public/style.css b/web/public/style.css
@@ -164,14 +164,58 @@ footer a:hover {
 }
 
 @media (prefers-color-scheme: dark) {
-    html,
-    img,
-    video,
-    iframe {
-        filter: invert(1);
-    }
 
     body {
-        background-color: white;
+        background-color: #121212;
+        color: #eee;
+    }
+
+    .container {
+        background-color: #1e1e1e;
+        box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
+    }
+
+    h1, h2 {
+        color: #eee;
+    }
+
+    input[type="file"],
+    button,
+    select,
+    input[type="number"] {
+        background-color: #333;
+        color: #fff;
+        border-color: #555;
+    }
+
+    button {
+         background-color: #4CAF50;
+    }
+
+    button:hover{
+        background-color: #367C39;
+    }
+
+    #status {
+        color: #ddd;
+    }
+
+    #preview img {
+        border-color: #666;
+    }
+
+    #downloadLink {
+        background-color: #2196F3;
+    }
+    #downloadLink:hover{
+        background-color: #0d8aee;
+    }
+
+    footer {
+      border-color: #555;
+      color: #eee
+    }
+    footer a {
+        color:#64b5f6
     }
 }