Better Dark color

Author: piroor

webextensions/panel/panel.css

@@ -16,9 +16,28 @@
 }
 
 :root[data-theme="dark"] {
-  --bg-color: #2A2A2E /* rgb(42, 42, 46) */;
-  --text-color: rgb(249, 249, 250);
+  --in-content-page-background: #2A2A2E /* rgb(42, 42, 46) */;
+  --in-content-button-background: rgba(249,249,250,0.1);
+  --in-content-button-background-hover: rgba(249,249,250,0.15);
+  --in-content-border-hover: rgba(249,249,250,0.3);
+
+  --bg-color: var(--dark-popup);
+  --text-color: var(--dark-popup-text);
+  --focused-item-bgcolor: var(--in-content-button-background-hover);
+  --focused-item-textcolor: var(--text-color);
   --disabled-message-bgcolor: rgba(42, 42, 46, 0.85);
+  scrollbar-color: var(--in-content-border-hover) var(--in-content-page-background);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: var(--dark-popup);
+    --text-color: var(--dark-popup-text);
+    --focused-item-bgcolor: var(--in-content-button-background-hover);
+    --focused-item-textcolor: var(--text-color);
+    --disabled-message-bgcolor: rgba(42, 42, 46, 0.85);
+    scrollbar-color: var(--in-content-border-hover) var(--in-content-page-background);
+  }
 }
 
 body {
@@ -76,6 +95,10 @@ body {
   padding: 0;
 }
 
+#tabs li:hover {
+  background: var(--in-content-button-background);
+}
+
 #tabs li * {
   line-height: 1;
   vertical-align: middle;

webextensions/resources/ui-color.css

@@ -198,7 +198,7 @@ hr {
     --in-content-deemphasized-text: var(--grey-40);
     --in-content-box-background: #202023;
     --in-content-box-background-hover: /* rgba(249,249,250,0.15) */ rgb(calc((42 * 0.85) + (249 * 0.15)), calc((42 * 0.85) + (249 * 0.15)), calc((46 * 0.85) + (250 * 0.15)));
-    --in-content-box-background-active: /*rgba(249,249,250,0.2) */ rgb(calc((42 * 0.8) + (249 * 0.2)), calc((42 * 0.8) + (249 * 0.25)), calc((46 * 0.8) + (250 * 0.2)));
+    --in-content-box-background-active: /*rgba(249,249,250,0.2) */ rgb(calc((42 * 0.8) + (249 * 0.2)), calc((42 * 0.8) + (249 * 0.2)), calc((46 * 0.8) + (250 * 0.2)));
     --in-content-box-background-odd: rgba(249,249,250,0.05);
     --in-content-box-info-background: rgba(249,249,250,0.15);