Theming & Branding

Beacon’s look is driven by CSS custom properties in src/styles/global.css. There’s no config object to learn — change a token, and it cascades everywhere.

Recolor in one line

The whole site is built around a single brand hue. Change --color-brand and the header, links, active nav, buttons, badges, and focus rings all follow:

/* src/styles/global.css */
@theme {
  --color-brand: #3b5bdb;        /* ← change this */
  --color-brand-strong: #2f49b3; /* hover / active */
  --color-brand-soft: #eef2ff;   /* tints + active nav */
  --color-brand-ink: #29388a;    /* brand text on soft bg */
}

For a fully cohesive palette, pick a --color-brand and derive the three variants as a darker shade, a very light tint, and a mid-dark ink.

Surface and ink tokens

Token	Role
--color-paper	Page background
--color-card	Raised surfaces / sidebar
--color-line	Hairline borders
--color-ink	Primary text
--color-ink-soft	Body copy
--color-muted	Secondary text / metadata

Changelog badge colors

Each change type has a matching color pair. Adjust these to taste:

--color-added: #1f9d63;   --color-added-soft: #e7f6ee;
--color-fixed: #b4801c;   --color-fixed-soft: #fbf2dd;
--color-changed: #3b5bdb; --color-changed-soft: #eef2ff;

Fonts

Beacon uses Inter for body text and JetBrains Mono for code, both self-hosted via Fontsource (no Google Fonts request). Swap them by changing the imports in src/layouts/Base.astro and the --font-body / --font-mono tokens.

Layout widths

The three-column docs shell reads from layout tokens:

--w-sidebar: 16rem;   /* left nav */
--w-toc: 14rem;       /* right TOC */
--w-content: 46rem;   /* reading measure */

Light, branded, and yours — without touching a single component.