Expand css variables when setting blockly theme

package.json

@@ -41,7 +41,7 @@
     "prettier": "jlpm prettier:base --write --list-different",
     "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css}\"",
     "prettier:check": "jlpm prettier:base --check",
-    "watch": "lerna run --stream watch"
+    "watch": "lerna run --stream --parallel watch"
   },
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "^5.12.1",

packages/blockly/package.json

@@ -34,7 +34,8 @@
     "clean": "jlpm clean:lib",
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "clean:all": "jlpm clean:lib",
-    "install:extension": "jlpm build"
+    "install:extension": "jlpm build",
+    "watch": "tsc -w --sourceMap"
   },
   "dependencies": {
     "@blockly/field-colour": "5.0.6",

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;