Merge pull request #11 from DenisaCG/all_themes

added personalized JupyterLab theme

Author: hbcarlos

src/layout.ts

@@ -9,6 +9,7 @@ import { IIterator, ArrayIterator } from '@lumino/algorithm';
 import * as Blockly from 'blockly';
 
 import { BlocklyManager } from './manager';
+import { THEME } from './utils';
 
 /**
  * A blockly layout to host the Blockly editor.
@@ -113,13 +114,16 @@ export class BlocklyLayout extends PanelLayout {
   /**
    * Handle `after-attach` messages sent to the widget.
    */
-  protected onAfterAttach(msg: Message): void {
+  protected onAfterAttach(msg: Message): void {    
+    //inject Blockly with appropiate JupyterLab theme.
     this._workspace = Blockly.inject(this._host, {
-      toolbox: this._manager.toolbox
+      toolbox: this._manager.toolbox,
+      theme: THEME
     });
   }
 
   private _resizeWorkspace(): void {
+    //Resize logic.
     const rect = this.parent.node.getBoundingClientRect();
     const { height } = this._outputArea.node.getBoundingClientRect();
     this._host.style.width = rect.width + 'px';

src/utils.ts

@@ -1,16 +1,7 @@
+import * as Blockly from 'blockly';
+
+// Creating a toolbox containing all the main (default) blocks.
 export const TOOLBOX = {
-  //kind: 'flyoutToolbox',
-  // contents: [
-  //   {
-  //     kind: 'block',
-  //     type: 'controls_if'
-  //   },
-  //   {
-  //     kind: 'block',
-  //     type: 'controls_whileUntil'
-  //   }
-  // ]
-  //{
   kind: 'categoryToolbox',
   contents: [
     {
@@ -360,3 +351,22 @@ export const TOOLBOX = {
     }
   ]
 };
+
+// Defining a Blockly Theme in accordance with the current JupyterLab Theme.
+const jupyterlab_theme = Blockly.Theme.defineTheme('jupyterlab', {
+  '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)',
+  }
+});
+
+export const THEME: Blockly.Theme = jupyterlab_theme;