docs

Theme getting started

@tailng-ui/theme is the visual contract behind TailNG. It ships presets, token composition helpers, CSS variable adapters, and runtime setup so the same design language can power plain CSS shells, Tailwind apps, and the styled component layer.

Presets for starting fast

Ship with a curated light and dark preset, then swap or extend it without reworking component markup.

Scoped CSS variable output

Export primitives and semantic tokens as CSS variables so wrappers, apps, and docs can theme locally or globally.

Adapters for real projects

Use Angular providers for app-wide theme setup or convert the same theme into a Tailwind preset when utilities own layout.

Quick start

Install the package once, then register a preset near the root of your Angular app. Everything under that scope can inherit the same semantic tokens.

pnpm add @tailng-ui/theme

import type { ApplicationConfig } from '@angular/core';
import { provideTailngTheme, defaultDarkThemePreset } from '@tailng-ui/theme';

export const appConfig: ApplicationConfig = {
  providers: [
    provideTailngTheme({ theme: defaultDarkThemePreset }),
  ],
};

Preset explorer

Switch the preset and mode to see how the same component surface changes when the theme scope changes. The preview below is locally scoped with generated CSS variables, so it behaves like an embedded product surface instead of mutating the docs app itself.

PresetMode

Balanced spacing and expressive accents for general product interfaces.

tailng-default-dark

Scoped preview rendered with generated CSS variables and a local color-scheme.

Keep layout and behavior stable while the preset controls background, border, accent, and focus treatments.

Background base#1e293b#1e293b

Surface#334155#334155

Primary text{color.white}#ffffff

Secondary text#cbd5e1#cbd5e1

Brand accent#60a5fa#60a5fa

Success accent#4ade80#4ade80

Default border#475569#475569

Focus ring#60a5fa#60a5fa

Authoring model

Most teams start from a preset, override the semantic scales that matter to the product, then choose the adapter that matches their stack.

Use presets for a stable baseline instead of recreating every primitive token from scratch.
Prefer semantic overrides for app branding so component wrappers keep a shared vocabulary.
Export CSS variables or Tailwind values from the same source theme to avoid design drift.

import { createTheme, defaultDarkThemePreset, type ThemeDefinition } from '@tailng-ui/theme';

export const productTheme: ThemeDefinition = createTheme(
  defaultDarkThemePreset,
  {
    meta: {
      name: 'acme-default-dark',
      mode: 'dark',
    },
    tokens: {
      semantic: {
        accent: {
          brand: '#60a5fa',
          brandHover: '#3b82f6',
        },
        focus: {
          ring: '#60a5fa',
        },
      },
    },
  },
);