Score-wide palette

Set the default color of every staff line, glyph, and text block from one place. The display.resources container holds a color field per element category, so a single settings object retints the whole document without touching individual notes. Use it to match your corporate palette, to build a dark-mode themed player with tinted glyphs, or to reserve red for a highlight layer applied on top through per-element colors.

Main glyphStaff lineBar separatorBar numbersScore info

What each field paints

Each color on RenderingResources covers one visual category:

• staffLineColor — the five horizontal lines of the notation staff and the tab staff lines.
• barSeparatorColor — barlines, the accolade brace, and repeat signs.
• barNumberColor — bar numbers rendered above each system.
• mainGlyphColor — noteheads, stems, beams, and effect glyphs of the primary voice.
• secondaryGlyphColor — the same glyphs when they belong to a secondary voice; defaults to a semi-transparent black so lower voices sit visually behind the main line.
• scoreInfoColor — the title, subtitle, artist, album, and copyright text.

The RenderingResources reference lists every field, including the font counterparts (barNumberFont, copyrightFont, and so on) that pair with each color.

Show it in code

Configure the palette at construction time — it takes effect on the first render:

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

const container = getAlphaTabContainer();
const api = new alphaTab.AlphaTabApi(container, {
  core: { file: '/scores/song.gp' },
  display: {
    resources: {
      mainGlyphColor: '#e91e63',
      staffLineColor: '#3f51b5',
      barSeparatorColor: '#3f51b5',
      barNumberColor: '#3f51b5',
      scoreInfoColor: '#3f51b5',
    },
  },
});

getAlphaTabContainer() is a placeholder for the platform-specific render target — a <div> on Web, an AlphaTab control on .NET, or an AlphaTabView on Android. The display.resources block is identical on every runtime.

To change the palette after load, mutate api.settings.display.resources and call api.updateSettings() followed by api.render().

Where to look next

• Per-element colors — override the color of one notehead, stem, or effect glyph instead of the score-wide default.
• Styling the playback cursor — CSS for the bar cursor, beat cursor, and beat highlight overlays.
• display.resources — the settings-side entry point for the palette.
• RenderingResources — the full field list with default values.
• updateSettings and render — apply palette changes made after load.