Add option to individually color staff lines

[fsienkiewicz]

Hi all,
I'm new to VexFlow and using it on a project for use with my Aural Skills classes at Vanderbilt.

I'd like to be able to color the staff lines independently — e.g. the 1st line in purple, the 3rd line in blue, and the 5th line in orange, while leaving the 2nd and 4th lines black.

I'm trying to implement a dynamic/interactive version of this worksheet: https://vanderbilt.box.com/s/pav6ln9jgejq9o94xblktczkqvj4d152

It looks like there is no possibility for this right now. Stave has a function to individually set whether lines are visible or not:
https://0xfe.github.io/vexflow/api/interfaces/StaveLineConfig.html

To my thinking, we'd need an additional property of options.line_config[line] object, of which the current only property is the boolean "visible", but could add a color as another option. And then when drawing the stave there'd need to be a check for that property and draw it in the appropriate color. Seems like a pretty easy thing to do, but I'm out of my depth on contributing to a project of this size and scope.

Does this sound like something that might work and/or could be added to an upcoming release? Anyone interested in working on this?

thanks!
Fred

[AaronDavidNewman]

Can you do it with nth-child modifier in css?

.vf-stave path:nth-of-type(2) {
	stroke: blue;
}

That seems to do it for me.

[fsienkiewicz]

Brilliant! Thanks! I'm totally new to working with dynamic SVG in the browser, so I hadn't even considered the possibility. Much more elegant than what I was thinking.

…

On Fri, Oct 13, 2023 at 5:55 PM Aaron ***@***.***> wrote: Can you do it with nth-child modifier in css? .vf-stave path:nth-of-type(2) { stroke: blue; } That seems to do it for me. — Reply to this email directly, view it on GitHub <#1599 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A5MLXDK2NEJNSFTTEQ336E3X7HBFJANCNFSM6AAAAAA55TBKFA> . You are receiving this because you authored the thread.Message ID: ***@***.***>