Change Block Colour from external

288 views
Skip to first unread message

Ümit Dönmez

unread,
Aug 23, 2021, 2:42:07 PM8/23/21
to Blockly
Hi, I created custom motion blocks and I would like to set variables for the colour so I can change them for example from style.css or even better from a parent app.
Can someone help?

I tried to give the primary color of my custom block a variable, so I can define it in style.css with certain color, but it doesn't work like this.

'motion_blocks': {
// "colourPrimary": "#5ad0e2",
"colourPrimary": "var(--motion-blockColor)"
}

Neil Fraser

unread,
Aug 23, 2021, 3:41:25 PM8/23/21
to Blockly
Yes, you can change the colour of a block dynamically from JavaScript using block.setColour:

There's an example of it in the Block Factory:
colours.gif

Ümit Dönmez

unread,
Aug 24, 2021, 4:49:06 PM8/24/21
to Blockly
I have a button and on click I want to change the Theme.
My function looks like this.

chooseTheme(theme: string){
this.workspace.setTheme(theme);
}

I get the Error

TypeError: this.theme_.getClassName is not a function

Please can someone help me.

And 2ndly I wanna update/reload the current toolbox.

this.workspace.getToolbox.reload();

is not working.

Beka Westberg

unread,
Aug 25, 2021, 10:18:57 AM8/25/21
to blo...@googlegroups.com
Hello!

Looks like this is a pretty easy fix! With regard to your themes question, as you can see here setTheme actually accepts a Blockly.Theme object, and not a string.

And with regard to your toolbox question, the toolbox page has documentation on how to do this. And also be sure to use `this.workspace.getToolbox()` with parenthesis!

I hope that helps =) If you have any further questions please reply!
--Beka

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/78171473-8eb4-4f5a-b606-59ba6fd9e568n%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages