Get the light terminal theme working.

packages/terminal/src/widget.ts

@@ -30,8 +30,14 @@ const TERMINAL_CLASS = 'jp-Terminal';
  */
 const TERMINAL_BODY_CLASS = 'jp-Terminal-body';
 
+/**
+ * The class name add to the terminal widget when it has the dark theme.
+ */
 const TERMINAL_DARK_THEME = 'jp-Terminal-dark';
 
+/**
+ * The class name add to the terminal widget when it has the light theme.
+ */
 const TERMINAL_LIGHT_THEME = 'jp-Terminal-light';
 
 
@@ -117,14 +123,14 @@ class Terminal extends Widget {
   }
 
   /**
-   * Get the text color of the terminal.
+   * Get the current theme, either light or dark.
    */
   get theme(): 'light' | 'dark' {
     return this._theme;
   }
 
   /**
-   * Set the text color of the terminal.
+   * Set the current theme, either light or dark.
    */
   set theme(value: 'light' | 'dark') {
     if (this._theme === value) {

packages/terminal/style/index.css

@@ -6,6 +6,11 @@
 @import url('~xterm/src/xterm.css');
 
 
+:root {
+  --jp-private-terminal-lightCursor-color: var(--md-grey-700);
+}
+
+
 .jp-Terminal {
   min-width: 200px;
   min-height: 200px;
@@ -38,36 +43,58 @@
 }
 
 
-.jp-Terminal-dark .xterm-viewport, .jp-Terminal-dark .xterm-rows {
-  background: black;
-  color: white;
+/**
+ * xterm.js ships with the dark theme. Here we add the somewhat subtle styles to get a light theme.
+ * This approach is taken directly from the xterm.js css and modified for our light theme.
+ */
+
+.jp-Terminal-light {
+  background: white;
+  color: black;
 }
 
 
-.jp-Terminal-dark .terminal.focus .terminal-cursor.blinking {
-  animation: .jp-Terminal-dark-blink-cursor 1.2s infinite step-end;
+.jp-Terminal-light .terminal {
+  background: white;
+  color: black;
 }
 
 
-@keyframes .jp-Terminal-dark-blink-cursor {
-  0% {
-    background-color: white;
-    color: black;
-  }
-  50% {
-    background-color: transparent;
+.jp-Terminal-light .terminal.focus:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar) .terminal-cursor {
+    background-color: var(--jp-private-terminal-lightCursor-color);
     color: white;
-  }
 }
 
 
-.jp-Terminal-light {
-  background: white;
-  color: dark;
+.jp-Terminal-light .terminal:not(.focus) .terminal-cursor {
+    outline: 1px solid var(--jp-private-terminal-lightCursor-color);
 }
 
 
-.jp-Terminal-light.xterm-viewport, .jp-Terminal-light .xterm-rows {
-  background: white;
-  color: dark;
+.jp-Terminal-light .terminal:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar).focus.xterm-cursor-blink-on .terminal-cursor {
+    background-color: transparent;
+    color: inherit;
+}
+
+
+.jp-Terminal-light .terminal.xterm-cursor-style-bar .terminal-cursor::before,
+.jp-Terminal-light .terminal.xterm-cursor-style-underline .terminal-cursor::before {
+    background-color: var(--jp-private-terminal-lightCursor-color);
+}
+
+
+.jp-Terminal-light .terminal.xterm-cursor-style-bar.focus.xterm-cursor-blink .terminal-cursor::before,
+.jp-Terminal-light .terminal.xterm-cursor-style-underline.focus.xterm-cursor-blink .terminal-cursor::before {
+    background-color: var(--jp-private-terminal-lightCursor-color);
 }
+
+
+.jp-Terminal-light .terminal .composition-view {
+    background: white;
+    color: black;
+}
+
+
+.jp-Terminal-light .terminal .xterm-viewport {
+    background-color: white;
+}