Respect dark vs light mode on popup

krismuniz · Sep 1, 2019 · 32e18a9 · 32e18a9
1 parent f682820
commit 32e18a9
Showing 1 changed file with 15 additions and 4 deletions.
diff --git a/src/css/popup.css b/src/css/popup.css
@@ -2,16 +2,17 @@
   min-width: 224px;
   user-select: none;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background-color: var(--background-color, #fff);
 }
 
 .divider {
   height: 1px;
-  background: rgba(0,0,0,0.1);
+  background: var(--divider-background-color, rgba(0,0,0,0.1));
   margin: 0.250rem 0;
 }
 
 .action {
-  color: #000;
+  color: var(--color, #000);
   padding: 0.500rem 1rem;
   font-size: 0.750rem;
   line-height: 1.2;
@@ -38,11 +39,11 @@
 }
 
 .action:hover {
-  background-color: rgba(0,0,0,0.05);
+  background-color: var(--action-hover-color, rgba(0,0,0,0.05));
 }
 
 .action:active {
-  background-color: #eeeeee;
+  background-color: var(--action-active-color, #eeeeee);
 }
 
 .action .favicon {
@@ -53,3 +54,13 @@
   margin-right: 0.5rem;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #292A2D;
+    --color: #fff;
+    --action-hover-color: rgba(255, 255, 255, 0.05);
+    --action-active-color: rgba(255, 255, 255, 0.1);
+    --divider-background-color: rgba(255, 255, 255, 0.1);
+  }
+}
+