diff --git a/package.json b/package.json index 55e6565..2062d45 100644 --- a/package.json +++ b/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", diff --git a/packages/blockly/package.json b/packages/blockly/package.json index dd2b0ae..dc48351 100644 --- a/packages/blockly/package.json +++ b/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", diff --git a/packages/blockly/src/layout.ts b/packages/blockly/src/layout.ts index 1ac914c..f3d67b8 100644 --- a/packages/blockly/src/layout.ts +++ b/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(() => { diff --git a/packages/blockly/src/utils.ts b/packages/blockly/src/utils.ts index 58009fb..198bfa7 100644 --- a/packages/blockly/src/utils.ts +++ b/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;