Dynamically populate the xterm instance stylesheet to account for background color, foreground color, and blinking cursor.

src/terminal/index.ts

@@ -248,12 +248,30 @@ class TerminalWidget extends Widget {
    */
   protected onUpdateRequest(msg: Message): void {
     // Set the fg and bg colors of the terminal and cursor.
-    this.node.style.backgroundColor = this.background;
-    this.node.style.color = this.color;
-    this._term.element.style.backgroundColor = this.background;
-    this._term.element.style.color = this.color;
-    this._sheet.innerHTML = (`#${this.node.id} .terminal-cursor {background:
-                             ${this.color};color:${this.background};}`);
+    const style = (`
+      #${this.node.id} {
+        background: ${this.background};
+        color: ${this.color};
+      }
+      #${this.node.id} .xterm-viewport, #${this.node.id} .xterm-rows {
+        background-color: ${this.background};
+        color: ${this.color};
+      }
+      #${this.node.id} .terminal.focus .terminal-cursor.blinking {
+          animation: ${this.node.id}-blink-cursor 1.2s infinite step-end;
+      }
+      @keyframes ${this.node.id}-blink-cursor {
+          0% {
+              background-color: ${this.color};
+              color: ${this.background};
+          }
+          50% {
+              background-color: transparent;
+              color: ${this.color};
+          }
+      }
+    `);
+    this._sheet.innerHTML = style;
   }
 
   /**