diff --git a/src/mol-plugin/context.ts b/src/mol-plugin/context.ts
index c961e2de6917f6a4ae543d6ac8ae1c598bdeaf9c..0de74dcd62ab84a102950bb764c930d29b09e847 100644
--- a/src/mol-plugin/context.ts
+++ b/src/mol-plugin/context.ts
@@ -190,7 +190,13 @@ export class PluginContext {
             const antialias = !(this.config.get(PluginConfig.General.DisableAntialiasing) ?? false);
             (this.canvas3d as Canvas3D) = Canvas3D.fromCanvas(canvas, {}, { antialias });
             this.canvas3dInit.next(true);
-            this.canvas3d?.setProps(this.spec.components?.viewport?.canvas3d || { renderer: { backgroundColor: Color(0xFCFBF9) } });
+            const props = this.spec.components?.viewport?.canvas3d;
+            if (!props || props.renderer?.backgroundColor === void 0) {
+                this.canvas3d?.setProps({ renderer: { backgroundColor: Color(0xFCFBF9) } });
+            }
+            if (props) {
+                this.canvas3d?.setProps(props);
+            }
             this.canvas3d!.animate();
             (this.helpers.viewportScreenshot as ViewportScreenshotHelper) = new ViewportScreenshotHelper(this);
             return true;