Changing keyboard key colors about ui HOT 10 CLOSED

Found how to do it for the whites...

keyboardA.colors.fill = "#777777";

from ui.

And to do it for the blacks:

keyboardA.colors.black = "#00FF00";

from ui.

I take that back..the "fill" just fills the object with a color on top.
I don't really know how to change the color of the white keys...
Anyone?

from ui.

Hey there @cesar3dartist, thanks for responding with some answers here. Yes, .fill is intended to be the white key colors. Try this and let me know if it's what you're after --

keyboardA.colors.fill = "red"
keyboardA.colors.borderhl = "blue"
keyboardA.colors.black = "yellow"
keyboardA.draw()

from ui.

from ui.

That works. Thanks a bunch!
Is there a way to increase the "lines" between the keys?
In the interface I'm using, the lines are not thick enough to see them.

from ui.

...also, I need to change the color of selected keys separate from the border.
keyboardA.colors.borderhl = "blue"
in "sustain" mode when i select a c major scale, the keys all become one big blue rectangle.

from ui.

Thinking this through, I am going to need to be able to define the:
white keys on color,
white keys off color,
white keys outline,
black keys on color,
black keys off color,
and black keys outline
...all individually.

from ui.

Unfortunately, this level of style customization is not currently supported by NexusUI. However, you can still achieve some aspects of styling by using CSS to access the child elements of a parent id. This will allow you to control some of the customizations you need. For example:
https://codepen.io/mscottnelson/pen/YYyGzo

from ui.

Hey there @cesar3dartist, thanks for responding with some answers here. Yes, .fill is intended to be the white key colors. Try this and let me know if it's what you're after --

keyboardA.colors.fill = "red"
keyboardA.colors.borderhl = "blue"
keyboardA.colors.black = "yellow"
keyboardA.draw()

Hey thanks for your answer. I have a problem with this approach, I'm getting an "Uncaught TypeError: keyboard.draw is not a function" error. Do you have any idea why is this happening? Thanks!

from ui.