From dbf7326554d193040442c3dab2649852cdc000d8 Mon Sep 17 00:00:00 2001
From: Jason Milkins <jasonm23@users.noreply.github.com>
Date: Tue, 29 Oct 2024 08:03:18 +0700
Subject: [PATCH] Update styles.css to use dark theme

Signed-off-by: jasonm23 <jasonm23@gmail.com>
---
 web-extension/styles.css | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/web-extension/styles.css b/web-extension/styles.css
index a415feb..b745f2d 100644
--- a/web-extension/styles.css
+++ b/web-extension/styles.css
@@ -1,9 +1,27 @@
+@media (prefers-color-scheme: light) {
+    :root {
+        --background-color: #fff;
+        --row-background-color: #fff;
+        --text-color: #000;
+        --hover-color: #bde;
+    }
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: #111;
+        --row-background-color: #000;
+        --text-color: #ddd;
+        --hover-color: #bde3;
+    }
+}
+
 body {
     padding: 0;
     margin: 0;
     font-family: sans-serif;
     min-width: 300px;
-    background: white;
+    background-color: var(--background-color);
+    color: var(--text-color);
 }
 
 .search input {
@@ -16,6 +34,11 @@ body {
     padding: 7px 20px 7px 7px;
 }
 
+input {
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
 .search input:focus {
     outline: 0;
 }
@@ -42,11 +65,12 @@ body {
     border: 0;
     border-bottom: 1px dotted #6bd6e4;
     text-align: left;
-    background: white url('icons/si-glyph-key-2.svg') no-repeat left 8px center;
+    background: var(--row-background-color) url('icons/si-glyph-key-2.svg') no-repeat left 8px center;
     background-size: 16px 16px;
     line-height: 1.2;
     font-size: 12px;
     min-height: 32px;
+    color: #ddd;
 }
 
 .detail-clickable-value:hover {
@@ -96,7 +120,7 @@ body {
 .login:hover,
 .login:focus {
     outline: 0;
-    background-color: #b6dee3;
+    background-color: var(--hover-color);
 }
 
 .entry:hover .copy,