Skip to content
Night Owls.dev
GitHubGet started
Jump to a page

@nightowlsdev/theme

UI

Framework-agnostic design tokens and theme presets for the Night Owls chat/agent UI.

What it does

@nightowlsdev/theme is the pure, dependency-free design-token layer underneath the Night Owls UI. It ships a set of named themes (ink/Vercel, owl/classic, mono/ChatGPT, warm, midnight, paper, 8-bit, tui, and more), each defining light/dark colors, radius, density, and font stacks (the package ships no fonts, only safe fallbacks). Use getTheme/resolveTheme to resolve a theme to CSS variables, defineTheme/extendTheme to author or override one, and the accent/theme presets plus font-scale helpers to tune accent color and density. It has zero React or @mastra dependency, so it can be consumed by any renderer; @nightowlsdev/react re-exports the whole API for convenience.

Install

pnpm add @nightowlsdev/theme

Key exports

  • themes / themeNames / DEFAULT_THEME / getTheme
  • defineTheme / extendTheme
  • resolveTheme / resolveThemeName
  • accentPresets / themePresets / applyPreset
  • fontSizes / FONT_SCALES / resolveFontScale
  • built-in themes: ink, owl, mono, warm, midnight, compact, paper, eightbit, tui, nightowls
  • types: Theme, ThemeColors, ThemeFont, ThemeMode, ThemeVars, Density, FontSize

Usage

theme.ts
import { getTheme, resolveTheme, themeNames } from "@nightowlsdev/theme";

// Resolve a built-in theme to CSS variables for a given mode.
const vars = resolveTheme(getTheme("nightowls"), "dark");

console.log(themeNames); // ["ink", "owl", "mono", "warm", ... "nightowls"]