Axerity

Themes

A theme is a complete palette: backgrounds, text, borders, and an accent, with a matching dark mode. Pick one in axerity.json:

{	"theme": "stripe"}

Leave it out (or use "neutral") for the default grayscale look. The theme is applied on the server, so there is no flash on load, and dark mode works with every preset.

Your own brand

Not tied to the presets. Set brand to drop in your own accent and corners on top of any theme (the accent drives links, active items, buttons, and the sidebar tint):

{	"theme": "neutral",	"brand": {		"accent": "#ff5722",		"radius": "0.75rem"	}}
Field Description
accent Accent color, any CSS color
accentDark Accent in dark mode (defaults to accent)
accentContrast Text color on the accent (default white)
radius Base corner radius, e.g. 0.5rem

Brand values win over the preset, so neutral plus your accent gives a clean, on-brand site. Pick a colored preset for a fuller reskin.

Presets

Each preset is tuned after a product’s documentation. Set the theme value to the name on the left.

Theme Accent Feel
neutral Grayscale Quiet monochrome, the default
stripe Indigo Airy and light with soft corners
vercel Black/white Maximum contrast, sharp corners
linear Violet Cool grays, dense, great in dark
supabase Green Dark-first with a bright green accent
github Blue Primer blue and the system font
tailwind Sky Slate grays and rounded corners
mintlify Emerald Friendly, light, and rounded
anthropic Clay Warm accent on an ivory page

Layout

The theme controls color, type, and corners. The layout controls the shape of the page and is set separately:

{	"theme": "stripe",	"layout": "boxed"}
  • flat puts the sidebar flush against the left edge and fills the screen.
  • boxed centers the whole site in a max-width container on wide screens.

Mix and match. Stripe and Tailwind feel at home boxed; Vercel and Linear suit the flat, full-width look.

Choose how the sidebar is presented with sidebar.variant:

{	"sidebar": { "variant": "floating" }}
  • flush is the default: a tinted panel against the edge with a divider.
  • card insets the sidebar as a bordered, rounded panel.
  • floating detaches it into a rounded, shadowed card that floats in the margin.

All three pick up the theme’s accent tint, so a floating Supabase sidebar reads green while a floating Stripe one reads indigo.