show logo in empty viewer

src/mol-plugin/skin/colors/dark.scss

@@ -1,5 +1,5 @@
 $default-background:         #111318;
-$font-color:                 #ccd4e0;  
+$font-color:                 #ccd4e0;
 $hover-font-color:           #51A2FB;
 $entity-current-font-color:  #68BEFD;
 $msp-btn-remove-background:      #DE0A28;

src/mol-plugin/skin/colors/light.scss

@@ -1,7 +1,7 @@
 // this is complement of the dark theme
 
 @function compl($color) {
-    @return rgb(255 - red($color), 255 - green($color), 255 - blue($color)); 
+    @return rgb(255 - red($color), 255 - green($color), 255 - blue($color));
 }
 
 $default-background:         compl(#111318);
@@ -19,7 +19,7 @@ $log-info:             #5E3673;
 $log-warning:          #FCC937;
 $log-error:            #FD354B;
 
-$logo-background: rgba(204,201,193,0.85);
+$logo-background: compl(#111318);
 
 @function color-lower-contrast($color, $amount) {
     @return lighten($color, $amount);

src/mol-plugin/ui/viewport.tsx

@@ -96,8 +96,19 @@ export class ViewportControls extends PluginUIComponent<ViewportControlsProps, V
     }
 }
 
+export const Logo = () =>
+    <div className='msp-logo'>
+        <div>
+            <div>
+                <div />
+                <div className='msp-logo-image' />
+            </div>
+        </div>
+    </div>
+
 interface ViewportState {
     noWebGl: boolean
+    showLogo: boolean
 }
 
 export class Viewport extends PluginUIComponent<{ }, ViewportState> {
@@ -105,9 +116,14 @@ export class Viewport extends PluginUIComponent<{ }, ViewportState> {
     private canvas = React.createRef<HTMLCanvasElement>();
 
     state: ViewportState = {
-        noWebGl: false
+        noWebGl: false,
+        showLogo: true
     };
 
+    private handleLogo = () => {
+        this.setState({ showLogo: this.plugin.canvas3d.reprCount.value === 0 })
+    }
+
     private handleResize = () => {
         const container = this.container.current;
         const canvas = this.canvas.current;
@@ -121,9 +137,11 @@ export class Viewport extends PluginUIComponent<{ }, ViewportState> {
         if (!this.canvas.current || !this.container.current || !this.plugin.initViewer(this.canvas.current!, this.container.current!)) {
             this.setState({ noWebGl: true });
         }
+        this.handleLogo();
         this.handleResize();
 
         const canvas3d = this.plugin.canvas3d;
+        this.subscribe(canvas3d.reprCount, this.handleLogo);
         this.subscribe(canvas3d.input.resize, this.handleResize);
 
         this.subscribe(canvas3d.interaction.click, e => this.plugin.behaviors.interaction.click.next(e));
@@ -155,6 +173,7 @@ export class Viewport extends PluginUIComponent<{ }, ViewportState> {
             <div className='msp-viewport-host3d' ref={this.container}>
                 <canvas ref={this.canvas} />
             </div>
+            {this.state.showLogo && <Logo />}
         </div>;
     }
 }