White blocks with colored text?

[Juan Pablo Garcia Ortiz]

Hi guys,

I'd like to be able to set the background color of the blocks in white, and change the color of the texts depending on the block type; this way, I hope, the visual result would be like a text of any programming language using an editor with highlight, but with the flexibility of Blockly, do you think this is feasible? if so, could you please give some clues to do it?

Thank you.

[Juan Pablo Garcia Ortiz]

Sorry to insist guys, any clue/idea/critic about this?

[Erik Pasternak]

I think you're going to have a lot of trouble with contrast and readability since you'd then have white blocks on a white background. It also will make any code written less glanceable (and harder for a novice to understand). As a simple example, if you have a lot of code it will become hard to tell the difference between a while loop and an if conditional since they only have text near the top.

That being said, you're welcome to try it.

[Austin Bart]

I suspect you'd need to mess with something around here:

https://github.com/google/blockly/blob/master/core/block_svg.js#L1226

Perhaps making more pastel colored blocks would take into account Erik's advice? I'd be interested in seeing how well it turns out, although I don't have super high expectations.

[Juan Pablo Garcia Ortiz]

Well, the result is interesting... I've modified the HSV_VALUE and HSV_SATURATION of Blockly.js, and also the "fill" property of the "blocklyText" class in css.js

Thanks.

[Andrew Stratton]

Over a year later - and I found a (better) way that doesn't require you to use uncompressed blockly:

I put a custom css BEFORE the blockly_compressed.js

The custom css contains:

.blocklySvg text {
  fill:black;
}

That's it - now you can have pastel (ish) colours, e.g. 

You do need some colour though otherwise everything fades out.

I am VERY HAPPY to found this - no need to include closure, etc.

Best wishes

  Andy