From ee87897547381bbf9313ad8a9d76b46ee0276afb Mon Sep 17 00:00:00 2001
From: Devo7v <Devo7v@users.noreply.github.com>
Date: Tue, 5 Nov 2019 15:19:55 -0500
Subject: [PATCH 1/2] Add some customization to the background colors

Added customization of the side panel, style list, editor background and gutter, check boxes, and buttons.
---
 stylus-dark.user.css | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/stylus-dark.user.css b/stylus-dark.user.css
index af06637..f788707 100644
--- a/stylus-dark.user.css
+++ b/stylus-dark.user.css
@@ -8,6 +8,12 @@
 @supportURL   https://github.com/overdodactyl/Stylus-Dark/issues
 @updateURL    https://raw.githubusercontent.com/overdodactyl/Stylus-Dark/master/stylus-dark.user.css 
 @license      CC-BY-SA-4.0
+
+@var color bg1 "Main Background Color" #38383d
+@var color bg2 "Side Panel Background" #2a2a2e
+@var color bg3 "Check box and input color" #38383d
+@var color bg4 "Button Colors" #2a2a2e
+@var color bg5 "Style editor background" #2a2a2e
 ==/UserStyle== */
 @-moz-document regexp("chrome-extension://.*"),
 regexp("moz-extension://.*") {
@@ -18,7 +24,7 @@ regexp("moz-extension://.*") {
   }
   #header {
     color: silver!important;
-    background: #2a2a2e!important;
+    background: var(--bg2)!important;
     border-style: none!important
   }
   #stylus-popup {
@@ -61,12 +67,12 @@ regexp("moz-extension://.*") {
     font-family: arial,sans-serif!important
   }
   input[type=checkbox]:not(.slider) {
-    background: #38383d!important
+    background: var(--bg3)!important
   }
   .firefox select,
   .sorter-selection select,
   input:not(.slider) {
-    background-color: #38383d!important;
+    background-color: var(--bg3)!important;
     color: silver!important;
     border: 1px solid #4a4a4f!important
   }
@@ -78,7 +84,7 @@ regexp("moz-extension://.*") {
     background-color: transparent!important
   }
   button {
-    background: #2a2a2e!important;
+    background: var(--bg4)!important;
     border: 1px solid #484848!important;
     color: silver!important;
     border-radius: 3px!important
@@ -127,7 +133,7 @@ regexp("moz-extension://.*") {
     color: #b1b1b3!important
   }
   .newUI .entry {
-    background: #38383d!important
+    background: var(--bg1)!important
   }
   .newUI .entry:hover {
     background: #2a2a2e!important
@@ -164,7 +170,7 @@ regexp("moz-extension://.*") {
     color: #d7d7db!important
   }
   .CodeMirror {
-    background: #2a2a2e!important;
+    background: var(--bg5)!important;
     color: #b1b1b3!important
   }
   div.CodeMirror-selected {
@@ -181,7 +187,7 @@ regexp("moz-extension://.*") {
     background: #353b48!important
   }
   .CodeMirror-gutters {
-    background: #2a2a2e!important;
+    background: var(--bg5)!important;
     border-right: 0 solid #4a4a4f!important
   }
   .CodeMirror-guttermarker,

From 79a029b57b57c5d912987c435a2d2268772866d5 Mon Sep 17 00:00:00 2001
From: Devo7v <Devo7v@users.noreply.github.com>
Date: Tue, 5 Nov 2019 15:41:06 -0500
Subject: [PATCH 2/2] Added another background customization

---
 stylus-dark.user.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/stylus-dark.user.css b/stylus-dark.user.css
index f788707..fb13c87 100644
--- a/stylus-dark.user.css
+++ b/stylus-dark.user.css
@@ -14,6 +14,7 @@
 @var color bg3 "Check box and input color" #38383d
 @var color bg4 "Button Colors" #2a2a2e
 @var color bg5 "Style editor background" #2a2a2e
+@var color bg6 "Background surrounding code sections" #2a2a2e
 ==/UserStyle== */
 @-moz-document regexp("chrome-extension://.*"),
 regexp("moz-extension://.*") {
@@ -48,7 +49,7 @@ regexp("moz-extension://.*") {
   #message-box-buttons,
   #message-box-title,
   body {
-    background: #2a2a2e!important
+    background: var(--bg6)!important
   }
   .search-result {
     background: #4a4a4f!important;