Fetch styles used in blockly theme; fixes #92

The var() function can be used in css styles, but not in css shorthand properties which are used to calculate the sizes of blocks in blockly. Notice that all blockly examples set style values to fixed values. A solution is to retrieve the values of css variables when setting the theme to the workspace.

Since changes in jupyterlab settings, e.g., selecting a different theme, may result in changes of css styles, the blockly theme needs to be re-applied after each such change.

Author: ykazakov

packages/blockly/src/layout.ts

@@ -10,7 +10,7 @@ import { Signal } from '@lumino/signaling';
 import * as Blockly from 'blockly';
 
 import { BlocklyManager } from './manager';
-import { THEME } from './utils';
+import { getTheme } from './utils';
 
 /**
  * A blockly layout to host the Blockly editor.
@@ -207,6 +207,8 @@ export class BlocklyLayout extends SplitLayout {
    */
   protected onFitRequest(msg: Message): void {
     super.onFitRequest(msg);
+    // Can be a result of a theme change
+    this._workspace.setTheme(getTheme());
     this._resizeWorkspace();
   }
 
@@ -218,7 +220,7 @@ export class BlocklyLayout extends SplitLayout {
     //inject Blockly with appropiate JupyterLab theme.
     this._workspace = Blockly.inject(this._host.node, {
       toolbox: this._manager.toolbox,
-      theme: THEME
+      theme: getTheme()
     });
 
     this._workspace.addChangeListener(() => {

packages/blockly/src/utils.ts

@@ -352,25 +352,30 @@ export const TOOLBOX = {
   ]
 };
 
-// Defining a Blockly Theme in accordance with the current JupyterLab Theme.
-const jupyterlab_theme = Blockly.Theme.defineTheme('jupyterlab', {
-  name: 'JupyterLab Blockly',
-  base: Blockly.Themes.Classic,
-  componentStyles: {
-    workspaceBackgroundColour: 'var(--jp-layout-color0)',
-    toolboxBackgroundColour: 'var(--jp-layout-color2)',
-    toolboxForegroundColour: 'var(--jp-ui-font-color0)',
-    flyoutBackgroundColour: 'var(--jp-border-color2)',
-    flyoutForegroundColour: 'var(--jp-layout-color3)',
-    flyoutOpacity: 1,
-    scrollbarColour: 'var(--jp-border-color0)',
-    insertionMarkerOpacity: 0.3,
-    scrollbarOpacity: 0.4,
-    cursorColour: 'var(--jp-scrollbar-background-color)'
-  },
-  fontStyle: {
-    family: 'var(--jp-ui-font-family)'
-  }
-});
+const getJupyterLabTheme = (): Blockly.Theme => {
+  const rootStyles = getComputedStyle(document.documentElement);
 
-export const THEME: Blockly.Theme = jupyterlab_theme;
+  const getStyle = (style: string) => rootStyles.getPropertyValue(style);
+
+  return Blockly.Theme.defineTheme('jupyterLab', {
+    name: 'JupyterLab',
+    base: Blockly.Themes.Classic,
+    componentStyles: {
+      workspaceBackgroundColour: getStyle('--jp-layout-color0'),
+      toolboxBackgroundColour: getStyle('--jp-layout-color2'),
+      toolboxForegroundColour: getStyle('--jp-ui-font-color0'),
+      flyoutBackgroundColour: getStyle('--jp-border-color2'),
+      flyoutForegroundColour: getStyle('--jp-layout-color3'),
+      flyoutOpacity: 1,
+      scrollbarColour: getStyle('--jp-border-color0'),
+      insertionMarkerOpacity: 0.3,
+      scrollbarOpacity: 0.4,
+      cursorColour: getStyle('--jp-scrollbar-background-color')
+    },
+    fontStyle: {
+      family: getStyle('--jp-ui-font-family')
+    }
+  });
+};
+
+export const getTheme = getJupyterLabTheme;