Getting StartedSetup and authoring guides 3
ToolsStarters and interactive helpers 2
ReferenceAPIs, styling contracts, and runnable examples 3

Download example theme

Start from a concrete theme file when you want a real light/dark pair instead of a blank exercise. The example below is tuned for an app dashboard surface and is ready to customize.

Download starter theme TypeScript file with matching light and dark exports.

Starter file

The download includes two ready-to-import themes built from TailNG presets. Adjust the semantic accent, surface, and focus tokens first, then continue into your own product scales if needed.

acme-dashboard.theme.ts

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

export const acmeDashboardLightTheme: ThemeDefinition = createTheme(defaultThemePreset, {
  meta: { name: 'acme-dashboard', mode: 'light' },
  tokens: {
    semantic: {
      background: { surface: '#f6fffb' },
      accent: { brand: '#0f766e', brandHover: '#115e59' },
      focus: { ring: '#0f766e' },
    },
  },
});

export const acmeDashboardDarkTheme: ThemeDefinition = createTheme(defaultDarkThemePreset, {
  meta: { name: 'acme-dashboard-dark', mode: 'dark' },
  tokens: {
    semantic: {
      accent: { brand: '#2dd4bf', brandHover: '#14b8a6' },
      focus: { ring: '#2dd4bf' },
    },
  },
});

Use the downloaded theme

Once the file is in your app, wire one of the exports into the Angular provider or generate CSS variables locally for a smaller theme scope.

  • Use the light export for product surfaces that default to bright canvas and subtle borders.
  • Use the dark export when the whole app runs in dark mode by default.
  • Rename the file and theme metadata so the resulting tokens are clearly product-owned.

Register the downloaded theme

ts
import type { ApplicationConfig } from '@angular/core';
import { provideTailngTheme } from '@tailng-ui/theme';
import { acmeDashboardDarkTheme } from './acme-dashboard.theme';

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