Getting started

Theming

Every component is painted with a 3-layer token system — primitive → semantic → component — compiled to CSS custom properties. Swap the preset or override any token and the whole library recolors, no CSS forking. Try it live: these controls restyle this entire site at runtime.

Playground

Pick a preset, an AI accent and a corner radius. Changes apply globally, instantly.

Preset

AI accent

Radius

AI generated

VerifiedReviewFlaggedPending

Generated by AI Case summary

Passport matched with 98% confidence. No sanctions or PEP hits. Recommend approval with a 12-month review.

Configure a preset

Choose a built-in preset, or build your own by merging overrides onto one with definePreset() — this is what "restyle outside of ours" means.

import { provideAgentic } from '@ng-agentic/core';
import { Aurora, definePreset } from '@ng-agentic/themes';

// A built-in preset...
provideAgentic({ theme: { preset: Aurora, darkModeSelector: '.dark' } });

// ...or your own brand, merged on top of one:
const Brand = definePreset(Aurora, {
  semantic: {
    radius: { lg: '20px' },
    colorScheme: {
      light: { ai: { color: '#e11d48' } },
      dark: { ai: { color: '#fb7185' } },
    },
  },
});
provideAgentic({ theme: { preset: Brand } });

Restyle at runtime

Inject AgenticThemeService to swap presets, merge token overrides or toggle dark mode after bootstrap — exactly what the playground above does.

import { inject } from '@angular/core';
import { AgenticThemeService } from '@ng-agentic/core';

const theme = inject(AgenticThemeService);

// Swap the whole preset
theme.setPreset(Aurora);

// Merge a token override onto the active preset
theme.updatePreset({
  semantic: { colorScheme: { light: { ai: { color: '#059669' } } } },
});

// Toggle class-based dark mode
theme.toggleDarkMode();

Key semantic tokens

Semantic tokens reference primitives and compile to these CSS variables.

Token	CSS variable	Description
`primary.color`	--agt-primary-color	Primary action colour (buttons, links, user bubble).
`ai.color`	--agt-ai-color	AI/agent accent — cursor, provenance, "generated by AI" marks.
`ai.gradient`	--agt-ai-gradient	Signature gradient for AI surfaces (summary accent, FAB).
`content.background`	--agt-content-background	Base surface behind panels and cards.
`content.color`	--agt-content-color	Default foreground text colour.
`radius.lg`	--agt-radius-lg	Large corner radius (bubbles, cards).
`state.success.color`	--agt-state-success-color	Success state (verified, tool-call success).
`state.danger.color`	--agt-state-danger-color	Danger state (flagged, errors, badges).