Add dark mode support to the popup panel

pages/popup/popup.css

@@ -258,3 +258,107 @@ footer {
         width: 348px;
     }
 }
+
+@media (prefers-color-scheme: dark) {
+
+    /**
+     * Sections
+     */
+
+    body {
+        background-color: #404040;
+        color: #f9f9fa;
+    }
+
+    header {
+        border-bottom-color: #292929;
+    }
+
+    /**
+     * Lists
+     */
+
+    .list-item {
+        background-color: #484848;
+        border-color: #292929;
+        color: #f0f0f0;
+    }
+
+    .sublist {
+        background-color: #323232;
+        border-color: #292929;
+        box-shadow: inset 0 2px 10px #292929;
+    }
+
+    .sublist:last-child {
+        border-bottom-color: #292929;
+    }
+
+    .sublist-item {
+        border-bottom-color: #2c2c2c;
+        color: #f0f0f0;
+    }
+
+    /**
+     * Buttons
+     */
+
+    .button {
+        background-color: #3c3c3c;
+        border-color: #323232;
+        color: #bbb;
+    }
+
+    .button:hover {
+        background-color: #434343;
+    }
+
+    .button:active {
+        background-color: #393939;
+    }
+
+    .button-toggle {
+        border-color: #363636;
+        color: #636363;
+    }
+
+    .button-toggle.active {
+        border-color: #323232;
+    }
+
+    /**
+     * Links
+     */
+
+    .link-text {
+        color: #7d7d7d;
+    }
+
+    .link-text:hover {
+        color: #dadada;
+    }
+
+    /**
+     * Miscellaneous
+     */
+
+    .badge {
+        color: #2d5042;
+    }
+
+    .description {
+        color: #dadada;
+    }
+
+    .label-domain {
+        color: #717171;
+    }
+
+    .panel:not(:last-child) {
+        border-bottom-color: #292929;
+    }
+
+    .side-note {
+        color: #888;
+    }
+}