add style for gridTable

src/index.ts

@@ -10,6 +10,7 @@ import {
 
 import {
   ICommandPalette,
+  IThemeManager,
   MainAreaWidget,
   WidgetTracker
 } from '@jupyterlab/apputils';
@@ -210,7 +211,6 @@ const notebooks: JupyterFrontEndPlugin<void> = {
     debug.model.disposed.connect(() => {
       handler.disposeAll(debug);
     });
-
     const updateHandlerAndCommands = async (widget: NotebookPanel) => {
       const { sessionContext } = widget;
       await sessionContext.ready;
@@ -271,7 +271,12 @@ const variables: JupyterFrontEndPlugin<void> = {
   id: '@jupyterlab/debugger:variables',
   autoStart: true,
   requires: [IDebugger],
-  activate: (app: JupyterFrontEnd, service: IDebugger) => {
+  optional: [IThemeManager],
+  activate: (
+    app: JupyterFrontEnd,
+    service: IDebugger,
+    themeManager: IThemeManager
+  ) => {
     const { commands, shell } = app;
     const tracker = new WidgetTracker<MainAreaWidget<VariableDetailsGrid>>({
       namespace: 'variableDetails'
@@ -311,6 +316,19 @@ const variables: JupyterFrontEndPlugin<void> = {
         });
         widget.id = id;
         void tracker.add(widget);
+
+        if (themeManager) {
+          const updateStyle = () => {
+            const isLight =
+              themeManager && themeManager.theme
+                ? themeManager.isLight(themeManager.theme)
+                : true;
+            widget.content.theme = isLight ? 'light' : 'dark';
+          };
+          themeManager.themeChanged.connect(updateStyle);
+          updateStyle();
+        }
+
         shell.add(widget, 'main', {
           mode: tracker.currentWidget ? 'split-right' : 'split-bottom'
         });
@@ -325,7 +343,7 @@ const variables: JupyterFrontEndPlugin<void> = {
 const main: JupyterFrontEndPlugin<IDebugger> = {
   id: '@jupyterlab/debugger:main',
   requires: [IEditorServices],
-  optional: [ILayoutRestorer, ICommandPalette, ISettingRegistry],
+  optional: [ILayoutRestorer, ICommandPalette, ISettingRegistry, IThemeManager],
   provides: IDebugger,
   autoStart: true,
   activate: async (
@@ -333,7 +351,8 @@ const main: JupyterFrontEndPlugin<IDebugger> = {
     editorServices: IEditorServices,
     restorer: ILayoutRestorer | null,
     palette: ICommandPalette | null,
-    settingRegistry: ISettingRegistry | null
+    settingRegistry: ISettingRegistry | null,
+    themeManager: IThemeManager | null
   ): Promise<IDebugger> => {
     const { commands, shell } = app;
 
@@ -435,6 +454,18 @@ const main: JupyterFrontEndPlugin<IDebugger> = {
       sidebar.service.sessionChanged.connect(updateVariableSettings);
     }
 
+    if (themeManager) {
+      const updateStyle = () => {
+        const isLight =
+          themeManager && themeManager.theme
+            ? themeManager.isLight(themeManager.theme)
+            : true;
+        sidebar.variables.theme = isLight ? 'light' : 'dark';
+      };
+      themeManager.themeChanged.connect(updateStyle);
+      updateStyle();
+    }
+
     sidebar.service.eventMessage.connect(_ => {
       commands.notifyCommandChanged();
     });

src/variables/grid.ts

@@ -7,7 +7,8 @@ import {
   BasicSelectionModel,
   DataGrid,
   DataModel,
-  SelectionModel
+  SelectionModel,
+  TextRenderer
 } from '@lumino/datagrid';
 
 import { CommandRegistry } from '@lumino/commands';
@@ -20,6 +21,7 @@ import { VariablesModel } from './model';
 
 import { CommandIDs } from '..';
 
+import { Theme } from '.';
 import { IDebugger } from '../tokens';
 
 export class VariablesBodyGrid extends Panel {
@@ -32,7 +34,6 @@ export class VariablesBodyGrid extends Panel {
     const updated = (model: VariablesModel) => {
       this._grid.dataModel.setData(model.scopes);
     };
-
     this._model.changed.connect(updated, this);
     this.addWidget(this._grid);
     this.addClass('jp-DebuggerVariables-body');
@@ -46,6 +47,10 @@ export class VariablesBodyGrid extends Panel {
     this._grid.dataModel.setData(this._model.scopes);
   }
 
+  set theme(theme: Theme) {
+    this._grid.theme = theme;
+  }
+
   private _grid: VariableGrid;
   private _model: VariablesModel;
 }
@@ -75,6 +80,13 @@ export class VariableGrid extends Panel {
     this.update();
   }
 
+  set theme(theme: Theme) {
+    const { dataStyle, textRender } =
+      theme === 'dark' ? Private.DARK_STYLE : Private.LIGHT_STYLE;
+    this._grid.cellRenderers.update({}, textRender);
+    this._grid.style = dataStyle;
+  }
+
   get dataModel(): VariableDataGridModel {
     return this._grid.dataModel as VariableDataGridModel;
   }
@@ -98,7 +110,7 @@ export class VariableDetailsGrid extends Panel {
     this.title.label = `${service.session?.connection?.name} - details of ${title}`;
     this._grid = new VariableGrid({ commands });
     const detailsScope = {
-      name: 'TEst',
+      name: title,
       variables: details
     };
     this._grid.dataModel.setData([detailsScope]);
@@ -109,6 +121,10 @@ export class VariableDetailsGrid extends Panel {
     this.addClass('jp-DebuggerVariableDetails');
   }
 
+  set theme(theme: Theme) {
+    this._grid.theme = theme;
+  }
+
   /**
    * Handle when the debug model changes.
    */
@@ -299,3 +315,41 @@ namespace VariableGrid {
     commands: CommandRegistry;
   }
 }
+
+namespace Private {
+  export const DARK_STYLE = {
+    dataStyle: {
+      voidColor: '#212121',
+      gridLineColor: '#424242',
+      backgroundColor: '#212121',
+      headerGridLineColor: '#424242',
+      headerBackgroundColor: '#616161',
+      selectionFillColor: '#2196f32e'
+    },
+    textRender: new TextRenderer({
+      font: '12px sans-serif',
+      textColor: '#ffffff',
+      backgroundColor: '',
+      verticalAlignment: 'center',
+      horizontalAlignment: 'left'
+    })
+  };
+
+  export const LIGHT_STYLE = {
+    dataStyle: {
+      voidColor: '#ffffff',
+      gridLineColor: '#bdbdbd',
+      backgroundColor: '#ffffff',
+      headerGridLineColor: '#bdbdbd',
+      headerBackgroundColor: '#d2d2d2',
+      selectionFillColor: '#2196f32e'
+    },
+    textRender: new TextRenderer({
+      font: '12px sans-serif',
+      textColor: '#000000',
+      backgroundColor: '',
+      verticalAlignment: 'center',
+      horizontalAlignment: 'left'
+    })
+  };
+}

src/variables/index.ts

@@ -71,6 +71,10 @@ export class Variables extends Panel {
     this._table.filter = filter;
   }
 
+  set theme(theme: Theme) {
+    this._table.theme = theme;
+  }
+
   /**
    * A message handler invoked on a `'resize'` message.
    */
@@ -94,6 +98,8 @@ export class Variables extends Panel {
   private _table: VariablesBodyGrid;
 }
 
+export type Theme = 'dark' | 'light';
+
 /**
  * Convert a variable to a primitive type.
  * @param variable The variable.