add theme to objectInspector

src/variables/body/index.tsx

@@ -3,7 +3,7 @@
 
 import { Variables } from '../index';
 
-import { ObjectInspector, ObjectLabel } from 'react-inspector';
+import { ObjectInspector, ObjectLabel, ITheme } from 'react-inspector';
 
 import { ReactWidget } from '@jupyterlab/apputils';
 
@@ -29,13 +29,15 @@ const defaultNodeRenderer = ({
   name,
   data,
   isNonenumerable,
-  expanded
+  expanded,
+  theme
 }: {
   depth: number;
   name: string;
   data: any;
   isNonenumerable: boolean;
   expanded: boolean;
+  theme?: string | Partial<ITheme>;
 }) => {
   const label = data.name === '' || data.name == null ? name : data.name;
   const value = data.value;
@@ -83,6 +85,7 @@ const VariableComponent = ({ model }: { model: Variables.IModel }) => {
           data={scopes.variables}
           name={scopes.name}
           nodeRenderer={defaultNodeRenderer}
+          theme={theme}
         />
       ))}
     </>
@@ -90,3 +93,31 @@ const VariableComponent = ({ model }: { model: Variables.IModel }) => {
 
   return <>{List()}</>;
 };
+
+const theme = {
+  BASE_FONT_FAMILY: 'var(--jp-code-font-family)',
+  BASE_FONT_SIZE: 'var(--jp-code-font-size)',
+  BASE_LINE_HEIGHT: 'var(--jp-code-line-height)',
+
+  BASE_BACKGROUND_COLOR: 'var(--jp-layout-color0)',
+  BASE_COLOR: 'var(--jp-content-font-color1)',
+
+  OBJECT_NAME_COLOR: 'var(--jp-mirror-editor-attribute-color)',
+  OBJECT_VALUE_NULL_COLOR: 'var(--jp-mirror-editor-builtin-color)',
+  OBJECT_VALUE_UNDEFINED_COLOR: 'var(--jp-mirror-editor-builtin-color)',
+  OBJECT_VALUE_REGEXP_COLOR: 'var(--jp-mirror-editor-string-color)',
+  OBJECT_VALUE_STRING_COLOR: 'var(--jp-mirror-editor-string-color)',
+  OBJECT_VALUE_SYMBOL_COLOR: 'var(--jp-mirror-editor-operator-color)',
+  OBJECT_VALUE_NUMBER_COLOR: 'var(--jp-mirror-editor-number-color)',
+  OBJECT_VALUE_BOOLEAN_COLOR: 'var(--jp-mirror-editor-builtin-color))',
+  OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: 'var(--jp-mirror-editor-def-color))',
+
+  ARROW_COLOR: 'var(--jp-content-font-color2)',
+  ARROW_MARGIN_RIGHT: 3,
+  ARROW_FONT_SIZE: 12,
+
+  TREENODE_FONT_FAMILY: 'var(--jp-code-font-family)',
+  TREENODE_FONT_SIZE: 'var(--jp-code-font-size)',
+  TREENODE_LINE_HEIGHT: 'var(--jp-code-line-height)',
+  TREENODE_PADDING_LEFT: 12
+};

src/variables/index.ts

@@ -13,7 +13,7 @@ export class Variables extends Panel {
   constructor(options: Variables.IOptions = {}) {
     super();
 
-    this.model = new Variables.IModel(demoDATA);
+    this.model = new Variables.IModel();
     this.addClass('jp-DebuggerVariables');
     this.title.label = 'Variables';
 
@@ -143,92 +143,3 @@ export namespace Variables {
 
   export interface IOptions extends Panel.IOptions {}
 }
-
-const demoDATA = [
-  {
-    name: 'Global',
-    variables: [
-      {
-        evaluateName: 'ptvsd',
-        name: 'ptvsd',
-        type: 'module',
-        value:
-          "<module 'ptvsd' from '/home/codete-bp/anaconda3/envs/jupyterlab-debugger/lib/python3.7/site-packages/ptvsd/__init__.py'>",
-        variablesReference: 5
-      }
-    ]
-  },
-  {
-    name: 'Locals',
-    variables: [
-      {
-        evaluateName: 'display',
-        name: 'display',
-        type: 'builtin_function_or_method',
-        value:
-          '<built-in method display of PyCapsule object at 0x7f1423490480>',
-        variablesReference: 4
-      },
-      {
-        evaluateName: 'ptvsd',
-        name: 'ptvsd',
-        type: 'module',
-        value:
-          "<module 'ptvsd' from '/home/codete-bp/anaconda3/envs/jupyterlab-debugger/lib/python3.7/site-packages/ptvsd/__init__.py'>",
-        variablesReference: 5
-      },
-      {
-        evaluateName: '__annotations__',
-        name: '__annotations__',
-        type: 'dict',
-        value: '{}',
-        variablesReference: 6
-      },
-      {
-        evaluateName: '__builtins__',
-        name: '__builtins__',
-        type: 'module',
-        value: "<module 'builtins' (built-in)>",
-        variablesReference: 7
-      },
-      {
-        evaluateName: '__doc__',
-        name: '__doc__',
-        type: 'NoneType',
-        value: 'None',
-        variablesReference: 0
-      },
-      {
-        evaluateName: '__loader__',
-        name: '__loader__',
-        type: 'type',
-        value: "<class '_frozen_importlib.BuiltinImporter'>",
-        variablesReference: 8
-      },
-      {
-        evaluateName: '__name__',
-        name: '__name__',
-        presentationHint: {
-          attributes: ['rawString']
-        },
-        type: 'str',
-        value: "'__main__'",
-        variablesReference: 0
-      },
-      {
-        evaluateName: '__package__',
-        name: '__package__',
-        type: 'NoneType',
-        value: 'None',
-        variablesReference: 0
-      },
-      {
-        evaluateName: '__spec__',
-        name: '__spec__',
-        type: 'NoneType',
-        value: 'None',
-        variablesReference: 0
-      }
-    ]
-  }
-];