Proposed Background Opacity Setting

What I added:
1. A new `desklet-background-color` entry in `settings-schema.json`, using the same `colorchooser` widget type your `font-color` and `static-theme-color` settings already use. That widget's picker has an alpha slider built in, so one control gives you both color *and* transparency - no separate opacity slider needed. Default is `rgba(0,0,0,0)` (fully transparent), so existing users see no change until they pick a color.
2. A `refreshBackground()` method in `desklet.js` that sets `this.content.style = "background-color: " + this.desklet_background_color + ";"` which is same pattern the original code already used for `font-color` in `getTextLabelStyle()`.
3. Wired it to run once at startup and again whenever settings change (`on_setting_changed`), so picking a new color updates in real time.
4. I also gave `show-background` a clearer label ("Show gauge track") and a tooltip, since it's easy to confuse with the new setting.

You can see all the changes in [`desklet-background-color.patch`](https://github.com/EvilSupahFly/cpu-load/blob/main/desklet-background-color.patch).

Author: EvilSupahFly

cpuload@kimse/files/cpuload@kimse/desklet.js

@@ -45,6 +45,7 @@ CpuLoadDesklet.prototype = {
         this.settings.bindProperty(Settings.BindingDirection.IN, 'static-theme-color', 'static_theme_color', this.on_setting_changed);
         this.settings.bindProperty(Settings.BindingDirection.IN, 'show-background', 'show_background', this.on_setting_changed);
         this.settings.bindProperty(Settings.BindingDirection.IN, 'hide-decorations', 'hide_decorations', this.on_setting_changed);
+        this.settings.bindProperty(Settings.BindingDirection.IN, 'desklet-background-color', 'desklet_background_color', this.on_setting_changed);
 
         // Properties
         this.cpus_utilization = [];
@@ -73,6 +74,7 @@ CpuLoadDesklet.prototype = {
         // Refresh the desklet window
         this.refreshScalingSizes();
         this.toggleDecoration();
+        this.refreshBackground();
 
         // Start the main desklet loop
         this.main();
@@ -89,6 +91,17 @@ CpuLoadDesklet.prototype = {
         this._updateDecoration();
     },
 
+    /**
+     * Apply the user-selected background color/transparency to the
+     * desklet face. `this.content` is the St.Bin the base Desklet class
+     * wraps our window in (see setContent() in ui/desklet.js) - styling
+     * it, rather than this.window, covers the full desklet bounding box
+     * instead of just the area behind the gauges.
+     */
+    refreshBackground() {
+        this.content.style = "background-color: " + this.desklet_background_color + ";";
+    },
+
     /**
      * Refresh desklet scaling.
      */
@@ -621,6 +634,9 @@ CpuLoadDesklet.prototype = {
         // Update decoration settings
         this.toggleDecoration();
 
+        // Refresh background color/transparency
+        this.refreshBackground();
+
         // Refresh scaling sizes
         this.refreshScalingSizes();
 

cpuload@kimse/files/cpuload@kimse/metadata.json

@@ -3,5 +3,6 @@
     "description": "Displays CPU load",
     "name": "CPU Load",
     "version": "0.8",
-    "uuid": "cpuload@kimse"
-}
+    "uuid": "cpuload@kimse",
+    "author": "schorschii"
+}

cpuload@kimse/files/cpuload@kimse/settings-schema.json

@@ -94,10 +94,17 @@
         "type": "header",
         "description": "Background"
     },
+    "desklet-background-color": {
+        "type": "colorchooser",
+        "default": "rgba(0,0,0,0)",
+        "description": "Desklet background",
+        "tooltip": "Background color for the whole desklet face. Use the alpha slider in the color picker to set transparency - alpha 0 keeps it fully see-through, matching the old behavior."
+    },
     "show-background": {
         "type": "checkbox",
-        "description": "Show background",
-        "default": true
+        "description": "Show gauge track",
+        "default": true,
+        "tooltip": "Show a faint ring behind each CPU gauge. This is separate from the desklet background above."
     },
     "hide-decorations": {
         "type": "checkbox",