add support for dark theme

friedPotat0 · Apr 5, 2021 · 7adf103 · 7adf103
1 parent 337410c
commit 7adf103
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 7 deletions.
diff --git a/options.css b/options.css
@@ -7,3 +7,22 @@
 .input-line img {
   margin-right: 5px;
 }
+
+/* COLOR SETTINGS FOR DARK/LIGHT THEME */
+@media (prefers-color-scheme: light) {
+  body {
+    color: black;
+    background: white;
+  }
+  input {
+    background-color: #333;
+    color: white;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    color: white;
+    background: #202023;
+  }
+}
diff --git a/popup.css b/popup.css
@@ -1,6 +1,5 @@
 body {
   padding: 20px;
-  color: black;
 }
 h5 {
   margin: 0;
@@ -33,7 +32,6 @@ table.score-details tr th:nth-child(2) {
 }
 table.score-details tr.score td span.info {
   font-size: 75%;
-  color: #7a7a7a;
   word-break: break-all;
 }
 table.score-details tr.score td:nth-child(2) span {
@@ -52,9 +50,36 @@ table.score-details tr.score.positive td:nth-child(2) span {
 table.score-details tr.score.neutral td:nth-child(2) span {
   background-color: #b4b4b4;
 }
-table.score-details tbody tr:nth-child(even) {
-  background: #eee;
-}
-table.score-details tbody tr:nth-child(odd) {
-  background: #fff;
+
+/* COLOR SETTINGS FOR DARK/LIGHT THEME */
+@media (prefers-color-scheme: light) {
+  body {
+    color: black;
+    background: white;
+  }
+  table.score-details tbody tr:nth-child(even) {
+    background: #eee;
+  }
+  table.score-details tbody tr:nth-child(odd) {
+    background: #fff;
+  }
+  table.score-details tr.score td span.info {
+    color: #7a7a7a;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    color: white;
+    background: #333;
+  }
+  table.score-details tbody tr:nth-child(even) {
+    background: #424242;
+  }
+  table.score-details tbody tr:nth-child(odd) {
+    background: #333;
+  }
+  table.score-details tr.score td span.info {
+    color: #949494;
+  }
 }