Theming

AgentsKit ships headless components — theming is your call. The CSS preset at @agentskit/react/theme is for DOM bindings that consume the shared data-ak-* attributes; it is not a universal runtime theme provider. Vue, Svelte, and Solid expose framework-specific styling inputs rather than equivalent theme packages; React Native uses component styles.

#Import a preset

import '@agentskit/react/theme'

#CSS variables

:root {
  --ak-bg: #0b0f17;
  --ak-surface: #111827;
  --ak-border: #1f2937;
  --ak-text: #e5e7eb;
  --ak-muted: #9ca3af;
  --ak-accent: #6366f1;
  --ak-danger: #ef4444;
  --ak-radius: 12px;
  --ak-font: ui-sans-serif, system-ui, sans-serif;
  --ak-mono: ui-monospace, SFMono-Regular, monospace;
}

#Dark / light

Variables flip on [data-theme="light"] / [data-theme="dark"].

#Tailwind

Wire Tailwind to the CSS variables:

theme: {
  extend: {
    colors: {
      ak: {
        bg: 'var(--ak-bg)',
        accent: 'var(--ak-accent)',
      },
    },
  },
}

#Native + terminal

• React Native: use the style and contentStyle props exposed by its components; no ThemeProvider is exported.
• Ink: use InkThemeProvider and its ANSI palette; it is not a CSS variable provider.

#Related

• Data attributes