Use current theme for terminal theme

packages/terminal/src/widget.ts

@@ -37,14 +37,9 @@ export class Terminal extends Widget {
     this._options = { ...Terminal.defaultOptions, ...options };
 
     const { initialCommand, theme, ...other } = this._options;
-    const { lightTheme, darkTheme } = Private;
-    const xtermTheme = theme === 'light' ? lightTheme : darkTheme;
-    const xtermOptions = { theme: xtermTheme, ...other };
+    const xtermOptions = { theme: Private.getCurrentTheme(), ...other };
 
     this.addClass(TERMINAL_CLASS);
-    if (theme === 'light') {
-      this.addClass('jp-mod-light');
-    }
 
     // Create the xterm.
     this._term = new Xterm(xtermOptions);
@@ -114,13 +109,7 @@ export class Terminal extends Widget {
     }
 
     if (option === 'theme') {
-      if (value === 'light') {
-        this.addClass('jp-mod-light');
-        this._term.setOption('theme', Private.lightTheme);
-      } else {
-        this.removeClass('jp-mod-light');
-        this._term.setOption('theme', Private.darkTheme);
-      }
+      this._term.setOption('theme', Private.getCurrentTheme());
     } else {
       this._term.setOption(option, value);
       this._needsResize = true;
@@ -332,7 +321,7 @@ export namespace Terminal {
     /**
      * The theme of the terminal.
      */
-    theme: Theme;
+    theme: 'light' | 'dark' | ITheme;
 
     /**
      * The amount of buffer scrollback to be used
@@ -355,7 +344,7 @@ export namespace Terminal {
    * The default options used for creating terminals.
    */
   export const defaultOptions: IOptions = {
-    theme: 'dark',
+    theme: 'light',
     fontFamily: 'courier-new, courier, monospace',
     fontSize: 13,
     lineHeight: 1.0,
@@ -367,7 +356,13 @@ export namespace Terminal {
   /**
    * A type for the terminal theme.
    */
-  export type Theme = 'light' | 'dark';
+  export interface ITheme {
+    foreground: string;
+    background: string;
+    cursor: string;
+    cursorAccent: string;
+    selection: string;
+  }
 }
 
 /**
@@ -380,24 +375,25 @@ namespace Private {
   export let id = 0;
 
   /**
-   * The light terminal theme.
+   * The current theme.
    */
-  export const lightTheme = {
-    foreground: '#000',
-    background: '#fff',
-    cursor: '#616161', // md-grey-700
-    cursorAccent: '#F5F5F5', // md-grey-100
-    selection: 'rgba(97, 97, 97, 0.3)' // md-grey-700
-  };
-
-  /**
-   * The dark terminal theme.
-   */
-  export const darkTheme = {
-    foreground: '#fff',
-    background: '#000',
-    cursor: '#fff',
-    cursorAccent: '#000',
-    selection: 'rgba(255, 255, 255, 0.3)'
-  };
+  export function getCurrentTheme(): Terminal.ITheme {
+    return {
+      foreground: getComputedStyle(document.body).getPropertyValue(
+        '--jp-ui-font-color0'
+      ),
+      background: getComputedStyle(document.body).getPropertyValue(
+        '--jp-layout-color0'
+      ),
+      cursor: getComputedStyle(document.body).getPropertyValue(
+        '--jp-ui-font-color1'
+      ),
+      cursorAccent: getComputedStyle(document.body).getPropertyValue(
+        '--jp-ui-inverse-font-color0'
+      ),
+      selection: getComputedStyle(document.body).getPropertyValue(
+        '--jp-ui-font-color3'
+      )
+    };
+  }
 }

packages/terminal/style/index.css

@@ -8,11 +8,6 @@
 .jp-Terminal {
   min-width: 240px;
   min-height: 120px;
-  background: black;
-}
-
-.jp-Terminal.jp-mod-light {
-  background: white;
 }
 
 .jp-Terminal-body {