Make the screen background cutomizable

Author: mykola-mokhnach

core/rfb.js

@@ -31,6 +31,7 @@ import TightPNGDecoder from "./decoders/tightpng.js";
 
 // How many seconds to wait for a disconnect to finish
 const DISCONNECT_TIMEOUT = 3;
+const DEFAULT_BACKGROUND = 'rgb(40, 40, 40)';
 
 export default class RFB extends EventTargetMixin {
     constructor(target, url, options) {
@@ -128,7 +129,7 @@ export default class RFB extends EventTargetMixin {
         this._screen.style.width = '100%';
         this._screen.style.height = '100%';
         this._screen.style.overflow = 'auto';
-        this._screen.style.backgroundColor = 'rgb(40, 40, 40)';
+        this._screen.style.background = DEFAULT_BACKGROUND;
         this._canvas = document.createElement('canvas');
         this._canvas.style.margin = 'auto';
         // Some browsers add an outline on focus
@@ -302,6 +303,9 @@ export default class RFB extends EventTargetMixin {
         this._refreshCursor();
     }
 
+    get background() { return this._screen.style.background; }
+    set background(cssValue) { this._screen.style.background = cssValue; }
+
     // ===== PUBLIC METHODS =====
 
     disconnect() {

docs/API.md

@@ -58,6 +58,12 @@ protocol stream.
     instead of a zero-sized or fully-transparent cursor if the server
     sets such invisible cursor. Disabled by default.
 
+`background`
+  - Is a valid CSS [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
+    style value indicating which background style should be applied
+    to the element containing the remote session screen. The default value is `rgb(40, 40, 40)`
+    (solid gray color).
+
 `capabilities` *Read only*
   - Is an `Object` indicating which optional extensions are available
     on the server. Some methods may only be called if the corresponding