Dark mode score rendering

[jonaro00]

A setting to render with a grey/black background and white scores.

Perhaps make colors of different visual elements fully customizable? If so, the dark mode would be a preset.

EDIT: I've now found the display.resources settings :D. They were pretty hard to find though, due to being hidden in their own docs page.
Since there is no option for changing the background color (I guess this is done in CSS etc), then having a setting that fixes the entire dark mode preset might not be possible? It could still set the colors of all glyphs/text to white etc and then let the user apply their gray/black background of choice though?
My rough idea is: Doing settings.display.darkMode = true; changes the default values (all colors that are not yet modified?) to a second set of default dark mode values. Any custom colors can still be applied.

[Danielku15]

You found correctly that colors are configured in display.resources. It is an overall idea of mine to bring things from the low level settings to a more "feature" level list in the docs. But this takes quite some time. I think there is currently not a good level feature overview of what alphaTab can actually do, but rather only a huge list of options you have to dig through.

There is no background option because it is always transparent and you can style things from the outside containers/controls around it.

I rather prefer not to have a darkMode in settings. It is rather expected that people individualize the colors using display.resources to their actual needs. Every website / app has usually their individualized color scheme.

I was thinking of rather having an "auto" mode on the colors for the web version where we try to detect certain colors. e.g. use the font foreground color to initialize the colors of glyphs and then apply some adjustments (e.g. brightness to derive the other colors).

[jonaro00]

That is a nice idea! Do you mean that we check the CSS color rule that is applied on/inherited onto the container element, and use that to derive a normal palette or darkmode palette for glyphs? Perhaps the backgroundColor rule could also be used, but that would require potentially moving up the DOM tree to find it (but I suspect it is more complicated). Maybe a predefined CSS class name or CSS variables to set? Just thinking out loud.

My thought with the option to manually apply a default darkmode palette is to aid developers that want to use/try a dark mode without writing lots of boilerplate code for managing the color switching for AT settings. Giving them this one setting and letting them set their favorite shade of black/gray as background probably satisfies many. This would of course not hinder anyone from using a fully custom color theme + switching. But if the automatic feature isn't too far away, this might not be needed.

Either way, we need a default dark mode palette to start off with.