Themes

tg2 components take their colours from CSS custom properties, so the theme is picked at runtime. Changing it needs no SCSS rebuild.

Include the tokens

The theme tokens come with Tangram's global styles. If your app already includes them, there's nothing to add.

// styles.scss
@use '@trademe/tangram/tangram';

The themes

Apply a theme

There are two ways to apply a theme. Both rely on CSS custom property inheritance, so no SCSS rebuild is needed.

Option 1 — per component

Set [theme] on each component. Use this when only a few components on a page need a different theme.

<button tg2Button [theme]="'tg2-dark'">Button</button>

<tg2-input-container label="Title" [theme]="'tg2-dark'">
    <input tg2Input required />
</tg2-input-container>

Option 2 — whole page or container

Set data-tg-theme="tg2-dark" on <html> or any ancestor element. Every tg2 component inside uses that theme, with no [theme] input needed.

// Toggle dark mode on the whole page
document.documentElement.setAttribute('data-tg-theme', 'tg2-dark');

// Reset to light mode
document.documentElement.removeAttribute('data-tg-theme');

// Or scope to a container element
containerElement.setAttribute('data-tg-theme', 'tg2-dark');

Components