diff --git a/macrovision.js b/macrovision.js
index 3994a7b1..94cbe3c1 100644
--- a/macrovision.js
+++ b/macrovision.js
@@ -723,7 +723,21 @@ function drawScales(ifDirty = false) {
 
     ctx.beginPath();
     ctx.rect(0, 0, ctx.canvas.width / deviceScale, ctx.canvas.height / deviceScale);
-    ctx.fillStyle = "#333";
+
+    switch(config.background){
+        case "black":
+            ctx.fillStyle = "#000";
+            break;
+        case "dark":
+            ctx.fillStyle = "#111";
+            break;
+        case "medium":
+            ctx.fillStyle = "#333";
+            break;
+        case "light":
+            ctx.fillStyle = "#555";
+            break;
+    }
     ctx.fill();
 
 
@@ -2500,6 +2514,25 @@ const settingsData = {
             toggleBodyClass("toggle-entity-glow", param);
         }
     },
+    "background-brightness": {
+        name: "Background Brightness",
+        desc: "How bright the background is",
+        type: "select",
+        default: "medium",
+        options: [
+            "black",
+            "dark",
+            "medium",
+            "light",
+        ],
+        get value() {
+            return config.background;
+        },
+        set value(param) {
+            config.background = param;
+            drawScales();
+        }
+    },
     "smoothing": {
         name: "Smoothing",
         desc: "Smooth out movements and size changes. Disable for better performance.",