Colors and CSS

View source

Configure design tokens with the Nikala CLI or tweakcn.

Colors are controlled by your project's Tailwind CSS design tokens. Nikala Docs does not override those tokens from docs.config.ts.

This means the same CSS can be shared by the documentation site and the application it documents.

Generate tokens with Nikala CLI

Every generated Folio project includes Nikala UI's local CLI workflow. Use it to generate the primary accent and base gray palette:

$ bunx @nikala-ui/cli theme set amber zinc

The first value selects the primary accent and the second selects the base gray palette. The command updates the local Tailwind CSS entrypoint and the project's nikala.config.json values.

The interactive form is also available:

$ bunx @nikala-ui/cli theme

Run these commands from the project root. The interactive command writes the selected values to the project's local CSS entrypoint and nikala.config.json.

Use tweakcn

tweakcn can be used to visually edit the same design tokens. Export or copy the generated CSS into the CSS entrypoint configured for the documentation site:

typescript
export default {
  css: "src/index.css",
};

Keep the generated semantic tokens such as --primary, --background, --foreground, and --muted in that file. The default docs theme consumes these tokens through Tailwind classes.

Ownership rule

Choose one source of truth for the site's design tokens: the local CSS file. The CLI and tweakcn are tools for generating or editing that file; the docs engine only consumes the result.