Get started

Theming

A preset is data: a style, a primary palette and a surface palette. provideTectra() turns it into CSS variables — change one value and every component repaints, on the server and in the browser.

Build a preset

Everything here repaints this whole site and is remembered — the same picker sits behind the palette button in the header.

import { provideTectra } from '@tectra-ng/core/config';
import { Tectra } from '@tectra-ng/themes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideTectra({
      preset: Tectra,
      ripple: true,
    }),
  ],
};

Four layers

Each layer is built from the one before it. Override at the layer you need — the rest keeps working.

1. 1PrimitivesRaw scales with no meaning: accent and surface palettes, radius, type, motion, layers.--tx-primary-500@tectra-ng/tokens
2. 2SemanticWhat a colour is for, in light and in dark: the primary action, a card, a field border.--tx-primary-baselight / dark
3. 3ComponentEvery value of every component — size, padding, colour per severity and variant.--tx-button-border-radiuspreset.components
4. 4InstanceThe dt input of one element overrides its component tokens, nothing else changes.Pill[dt]template

Palettes

The scales of the current preset. Click a step to copy its variable.

68 variables of the current preset, light and dark side by side. Click a row to copy var(…).

Customize

const Brand = definePreset(Tectra, {
  light: { primary: { base: '#0f766e', hover: '#115e59' } },
  dark: { primary: { base: '#2dd4bf', hover: '#5eead4' } },
});

provideTectra({ preset: Brand });

const Rounded = definePreset(Tectra, {
  components: {
    button: { root: { borderRadius: '999px' } },
    card: { root: { borderRadius: '24px' } },
  },
});

<button txButton [dt]="{ root: { borderRadius: '0' } }">Square</button>

<tx-badge value="New" [dt]="{ primary: { background: '#0d9488' } }" />

const theme = inject(TxThemeService);

theme.applyPreset(createTectraPreset({ style: 'soft', primary: 'violet' }));
theme.setMode('dark');
theme.toggleMode();

import { createTectraPreset, presetToCss } from '@tectra-ng/themes';

const css = presetToCss(createTectraPreset({ primary: 'emerald' }));

writeFileSync('theme.css', css);

provideTectra({
  preset: Tectra,
  unstyled: true,
  pt: { button: { root: { class: 'btn' } } },
});

Next steps