Modify Colors of rendered SVG elements

[garthholmes]

Description

Feature request, originally posted as a question here: #213

I edited the following lines, from 26765 to 26790 in the JavaScript developer branch as follows:

alphaTab.rendering.RenderingResources.prototype = {
	Init: function(scale) {
		this.Scale = scale;
		var sansFont = "Arial";
		var serifFont = "Georgia";
		this.EffectFont = new alphaTab.platform.model.Font(serifFont,12 * scale,2);
		this.CopyrightFont = new alphaTab.platform.model.Font(sansFont,12 * scale,1);
		this.FretboardNumberFont = new alphaTab.platform.model.Font(sansFont,11 * scale,0);
		this.TitleFont = new alphaTab.platform.model.Font(serifFont,32 * scale,0);
		this.SubTitleFont = new alphaTab.platform.model.Font(serifFont,20 * scale,0);
		this.WordsFont = new alphaTab.platform.model.Font(serifFont,15 * scale,0);
		this.TablatureFont = new alphaTab.platform.model.Font(sansFont,13 * scale,0);
		this.GraceFont = new alphaTab.platform.model.Font(sansFont,11 * scale,0);
		this.StaveLineColor = new alphaTab.platform.model.Color(255,255,255,255);
		this.BarSeperatorColor = new alphaTab.platform.model.Color(255,255,255,255);
		this.BarNumberFont = new alphaTab.platform.model.Font(sansFont,11 * scale,0);
		this.BarNumberColor = new alphaTab.platform.model.Color(255,0,0,255);
		this.FingeringFont = new alphaTab.platform.model.Font(serifFont,14 * scale,0);
		this.MarkerFont = new alphaTab.platform.model.Font(serifFont,14 * scale,1);
		this.TabClefFont = new alphaTab.platform.model.Font(sansFont,18 * scale,1);
		this.ScoreInfoColor = new alphaTab.platform.model.Color(255,255,255,255);
		this.MainGlyphColor = new alphaTab.platform.model.Color(255,255,255,255);
		this.SecondaryGlyphColor = new alphaTab.platform.model.Color(255,255,255,255);
	}
	,__class__: alphaTab.rendering.RenderingResources
};

relating only to colors, which enabled me to style passive page elements such as Note Heads, Stems and Staffs.

Regarding active page elements, I edited the following CSS classes:

    .barCursor { /* Defines the color of the bar background when a bar is played */
        background: rgba(255, 0, 0, 0.15);
    }

    .selectionWrapper div { /* Defines the color of the selection background */
        background: rgba(255, 0, 0, 0.1)
    }

    .beatCursor { /* Defines the beat cursor */
        background: rgb(255, 0, 0, 255)
    }
    
    .atHighlight * { /* Defines the color of the music symbols when they are being played (svg) */
        fill: #ff0000;
        stroke: #ff0000;
    }

which allowed me to modify the appearance of moving objects on the screen such as the Bar Cursor, Selection Wrapper and Beat Cursor, as well as to highlight Music Symbols.

Possible Solutions

None identified

Current Workarounds

Edit Source code (see above) and create CSS styles for page elements, including rendered SVG elements.

[Danielku15]

This feature is now available. Just grab the latest build 0.9.3.156 or higher.
Docs are available here: https://docs.alphatab.net/develop/examples/render-customization/colors-fonts