Skip to content

Commit d6fe036

Browse files
DenisaCGhbcarlos
DenisaCG
authored and
hbcarlos
committed
added personalized jupyterlab theme
1 parent 0696926 commit d6fe036

File tree

3 files changed

+149
-20
lines changed

3 files changed

+149
-20
lines changed

‎Untitled.ipynb‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"cells": [
3+
{
4+
"cell_type": "code",
5+
"execution_count": null,
6+
"id": "b9c30948-468f-46c7-aa8e-c4b417ecc1b5",
7+
"metadata": {},
8+
"outputs": [],
9+
"source": []
10+
}
11+
],
12+
"metadata": {
13+
"kernelspec": {
14+
"display_name": "Python 3 (ipykernel)",
15+
"language": "python",
16+
"name": "python3"
17+
},
18+
"language_info": {
19+
"codemirror_mode": {
20+
"name": "ipython",
21+
"version": 3
22+
},
23+
"file_extension": ".py",
24+
"mimetype": "text/x-python",
25+
"name": "python",
26+
"nbconvert_exporter": "python",
27+
"pygments_lexer": "ipython3",
28+
"version": "3.10.2"
29+
}
30+
},
31+
"nbformat": 4,
32+
"nbformat_minor": 5
33+
}

‎src/layout.ts‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { IIterator, ArrayIterator } from '@lumino/algorithm';
99
import * as Blockly from 'blockly';
1010

1111
import { BlocklyManager } from './manager';
12+
import { define_jupyter_theme } from './utils';
1213

1314
/**
1415
* A blockly layout to host the Blockly editor.
@@ -113,13 +114,25 @@ export class BlocklyLayout extends PanelLayout {
113114
/**
114115
* Handle `after-attach` messages sent to the widget.
115116
*/
116-
protected onAfterAttach(msg: Message): void {
117+
protected onAfterAttach(msg: Message): void {
118+
//inject Blockly with appropiate JupyterLab theme.
119+
var jupyterlab_theme = define_jupyter_theme();
117120
this._workspace = Blockly.inject(this._host, {
118-
toolbox: this._manager.toolbox
121+
toolbox: this._manager.toolbox,
122+
theme : jupyterlab_theme
119123
});
120124
}
121125

122126
private _resizeWorkspace(): void {
127+
//Set theme for Blockly in accordance to JupyterLab theme.
128+
var jupyterlab_theme = define_jupyter_theme();
129+
if(this._workspace)
130+
{
131+
this._workspace.setTheme(jupyterlab_theme);
132+
this._workspace.refreshTheme();
133+
}
134+
135+
//Resize logic.
123136
const rect = this.parent.node.getBoundingClientRect();
124137
const { height } = this._outputArea.node.getBoundingClientRect();
125138
this._host.style.width = rect.width + 'px';

‎src/utils.ts‎

Lines changed: 101 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,14 @@
1+
import * as Blockly from 'blockly';
2+
3+
// Creating a toolbox containing all the main (default) blocks.
14
export const TOOLBOX = {
2-
//kind: 'flyoutToolbox',
3-
// contents: [
4-
// {
5-
// kind: 'block',
6-
// type: 'controls_if'
7-
// },
8-
// {
9-
// kind: 'block',
10-
// type: 'controls_whileUntil'
11-
// }
12-
// ]
13-
//{
145
kind: 'categoryToolbox',
156
contents: [
167
{
178
kind: 'category',
189
name: 'Logic',
19-
colour: '210',
10+
categorystyle: "logic_category",
11+
blockstyle: 'logic_blocks',
2012
contents: [
2113
{
2214
kind: 'block',
@@ -56,7 +48,8 @@ export const TOOLBOX = {
5648
{
5749
kind: 'category',
5850
name: 'Loops',
59-
colour: '120',
51+
categorystyle: "loops_category",
52+
blockstyle: 'loops_blocks',
6053
contents: [
6154
{
6255
kind: 'BLOCK',
@@ -90,7 +83,8 @@ export const TOOLBOX = {
9083
{
9184
kind: 'CATEGORY',
9285
name: 'Math',
93-
colour: '230',
86+
categorystyle: "math_category",
87+
blockstyle: 'math_blocks',
9488
contents: [
9589
{
9690
kind: 'BLOCK',
@@ -171,7 +165,8 @@ export const TOOLBOX = {
171165
{
172166
kind: 'CATEGORY',
173167
name: 'Text',
174-
colour: '160',
168+
categorystyle: "text_category",
169+
blockstyle: 'text_blocks',
175170
contents: [
176171
{
177172
kind: 'BLOCK',
@@ -248,7 +243,8 @@ export const TOOLBOX = {
248243
{
249244
kind: 'CATEGORY',
250245
name: 'Lists',
251-
colour: '260',
246+
categorystyle: "list_category",
247+
blockstyle: 'list_blocks',
252248
contents: [
253249
{
254250
kind: 'BLOCK',
@@ -317,7 +313,8 @@ export const TOOLBOX = {
317313
{
318314
kind: 'CATEGORY',
319315
name: 'Color',
320-
colour: '20',
316+
categorystyle: "color_category",
317+
blockstyle: 'color_blocks',
321318
contents: [
322319
{
323320
kind: 'BLOCK',
@@ -349,14 +346,100 @@ export const TOOLBOX = {
349346
{
350347
kind: 'CATEGORY',
351348
colour: '330',
349+
// categorystyle: "variables_category",
350+
// blockstyle: 'variables_blocks',
352351
custom: 'VARIABLE',
353352
name: 'Variables'
354353
},
355354
{
356355
kind: 'CATEGORY',
357356
colour: '290',
357+
// categorystyle: "functions_category",
358+
// blockstyle: 'functions_blocks',
358359
custom: 'PROCEDURE',
359360
name: 'Functions'
360361
}
361362
]
362363
};
364+
365+
// Defining a Blockly Theme in accordance with the current JupyterLab Theme.
366+
export function define_jupyter_theme() : Blockly.Theme{
367+
Blockly.registry.unregister('theme', 'jupyterlab');
368+
369+
var jupyterlab_theme = Blockly.Theme.defineTheme('jupyterlab', {
370+
'base': Blockly.Themes.Classic,
371+
'blockStyles': {
372+
"logic_blocks": {
373+
"colourPrimary": getComputedStyle(document.documentElement).getPropertyValue('--jp-error-color1'),
374+
"colourSecondary": getComputedStyle(document.documentElement).getPropertyValue('--jp-error-color3')
375+
},
376+
"loops_blocks": {
377+
"colourPrimary": getComputedStyle(document.documentElement).getPropertyValue('--jp-accent-color0'),
378+
"colourSecondary": getComputedStyle(document.documentElement).getPropertyValue('--jp-accent-color3')
379+
},
380+
"math_blocks": {
381+
"colourPrimary": getComputedStyle(document.documentElement).getPropertyValue('--jp-brand-color0'),
382+
"colourSecondary": getComputedStyle(document.documentElement).getPropertyValue('--jp-brand-color3')
383+
},
384+
"text_blocks": {
385+
"colourPrimary": getComputedStyle(document.documentElement).getPropertyValue('--jp-icon-contrast-color0'),
386+
},
387+
"list_blocks": {
388+
"colourPrimary": getComputedStyle(document.documentElement).getPropertyValue('--jp-icon-contrast-color2')
389+
},
390+
"color_blocks": {
391+
"colourPrimary": getComputedStyle(document.documentElement).getPropertyValue('--jp-warn-color0'),
392+
"colourSecondary": getComputedStyle(document.documentElement).getPropertyValue('--jp-warn-color3')
393+
},
394+
"variables_blocks": {
395+
"colourPrimary": getComputedStyle(document.documentElement).getPropertyValue('--jp-accent-color2'),
396+
"colourSecondary": getComputedStyle(document.documentElement).getPropertyValue('--jp-accent-color3')
397+
},
398+
"functions_blocks": {
399+
"colourPrimary": getComputedStyle(document.documentElement).getPropertyValue('--jp-info-color0'),
400+
"colourSecondary": getComputedStyle(document.documentElement).getPropertyValue('--jp-info-color3')
401+
}
402+
},
403+
'categoryStyles': {
404+
"logic_category": {
405+
"colour": getComputedStyle(document.documentElement).getPropertyValue('--jp-error-color1')
406+
},
407+
"loops_category": {
408+
"colour": getComputedStyle(document.documentElement).getPropertyValue('--jp-accent-color0')
409+
},
410+
"math_category": {
411+
"colour": getComputedStyle(document.documentElement).getPropertyValue('--jp-brand-color0')
412+
},
413+
"text_category": {
414+
"colour": getComputedStyle(document.documentElement).getPropertyValue('--jp-icon-contrast-color0')
415+
},
416+
"list_category": {
417+
"colour": getComputedStyle(document.documentElement).getPropertyValue('--jp-icon-contrast-color2')
418+
},
419+
"color_category": {
420+
"colour": getComputedStyle(document.documentElement).getPropertyValue('--jp-warn-color0')
421+
},
422+
"variables_category": {
423+
"colour": getComputedStyle(document.documentElement).getPropertyValue('--jp-accent-color2')
424+
},
425+
"functions_category": {
426+
"colour": getComputedStyle(document.documentElement).getPropertyValue('--jp-info-color0')
427+
}
428+
},
429+
'componentStyles': {
430+
'workspaceBackgroundColour': getComputedStyle(document.documentElement).getPropertyValue('--jp-layout-color0'),
431+
'toolboxBackgroundColour': getComputedStyle(document.documentElement).getPropertyValue('--jp-layout-color2'),
432+
'toolboxForegroundColour': getComputedStyle(document.documentElement).getPropertyValue('--jp-ui-font-color0'),
433+
'flyoutBackgroundColour': getComputedStyle(document.documentElement).getPropertyValue('--jp-border-color2'),
434+
'flyoutForegroundColour': getComputedStyle(document.documentElement).getPropertyValue('--jp-layout-color3'),
435+
'flyoutOpacity': 1,
436+
'scrollbarColour': getComputedStyle(document.documentElement).getPropertyValue('--jp-border-color0'),
437+
'insertionMarkerColour': getComputedStyle(document.documentElement).getPropertyValue('--jp-warn-color-active'),
438+
'insertionMarkerOpacity': 0.3,
439+
'scrollbarOpacity': 0.4,
440+
'cursorColour': getComputedStyle(document.documentElement).getPropertyValue('--jp-scrollbar-background-color'),
441+
}
442+
});
443+
444+
return jupyterlab_theme;
445+
}

0 commit comments

Comments
 (0)