Is it possible to customize appearance?

[bali182]

Hello, first thanks for this fully featured, open source tool, it's great that this exists.

My goal in short: I'm trying to invert the color scheme, and fit it into a dark themed HTML site.

• The styling guide didn't help much, as I'm trying to color all the little SVG elements that are black:
  https://alphatab.net/docs/guides/styling-player
• A good number of SVG elements are inline-styled and/or have no classes, so styling using CSS doesn't seem the most straightforward thing to do.
• Found this discussion, which lead me to try to customize using config.display.resources: Dark mode score rendering #1048

Only issue is, that the configuration needs Font and Color instances, and through the '@coderline/alphatab' package I have no access to the constructors (am using Typescript).

Consider this example:

import { RenderingResources  } from '@coderline/alphatab'

const resources: Partial<RenderingResources> = {
  barNumberColor: ... // How do I instantiate a Color? Where can I import it from?
  barNumberFont: ... // Same here, how to I get access to the Font constructor?
}

Thanks for any info in advance!

[Danielku15]

Seems you might have mixed up the "strong typed settings" and the "initialization from JSON". But you're right that things can be a bit confusing for the start. As we're compiling alphaTab to C# and Kotlin, things inside alphaTab are rather strictly typed but in the web version we offer some more dynamic means to configure settings:

• https://www.alphatab.net/docs/reference/settings

Initialization via JSON object

const api = new AlphaTabApi(document.querySelector("#alphaTab"), {
  display: {
    resources: {
      staffLineColor: '#ffffff80',
      barSeparatorColor: '#fff',
      mainGlyphColor: '#fff',
      secondaryGlyphColor: '#fff',
      scoreInfoColor: '#fff',
      barNumberColor: '#fff',
    },
  },
})

Initialization via Strong types

import * as alphaTab from "@coderline/alphatab";

const settings = new alphaTab.Settings();

settings.display.resources.staffLineColor = new alphaTab.model.Color(0,0,0, 0x80),
settings.display.resources.barSeparatorColor = alphaTab.model.Color.fromJson('#fff')!,

const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')!, settings);

Changing settings later

const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')!, {});
api.settings.display.resources.staffLineColor = new alphaTab.model.Color(0,0,0, 0x80),
api.settings.display.resources.barSeparatorColor = alphaTab.model.Color.fromJson('#fff')!,
api.updateSettings();

I added #1561 to improve the clarity in this area.

[bali182]

Ah ok, that explains the difference between the typings and the plain JS object config!

I was a bit confused because I started looking at the type definitions, and that lead me to the CoreSettings type.

Thanks for the explanation, I'll switch to your second example, so typings are in sync!

[Danielku15]

I implemented some code generation for plain JS object schema in 1.4. The build from last night (1.4.0-alpha) should have them already.