Customization

Colors

The theme uses Starlight’s CSS custom property system for colors. Override them in your own CSS file to change the palette.

Dark Mode Colors

Dark mode is the default. The theme maps Tailwind’s gray scale to Starlight’s --sl-color-gray-* variables.

Light Mode Colors

Light mode activates when data-theme="light" is set on the root element. The gray scale is inverted for proper contrast.

Accent Colors

The theme uses a warm orange accent:

Dark mode: #fb923c
Light mode: #c2410c

These are applied to --sl-color-accent, --sl-color-accent-high, and --sl-color-accent-low. Override these variables in your custom CSS to change the accent.

Typography

Font Family

The theme ships with Inter via @fontsource/inter. To use a different font, override --sl-font in your custom CSS.

Font Sizes

The base font size is 14px. Heading sizes use fixed rem values for a compact feel:

h1: 1.45rem
h2: 1.2rem
h3: 1.05rem
h4: 0.95rem
h5: 0.85rem
h6: 0.8rem

Body text uses 0.9rem.

Layout

Content Width

The main content column is 55rem wide, up from Starlight’s default 45rem and nova’s 50rem.

Both sidebars are set to 17rem, slightly narrower than the defaults to give more room to content.

Borders

All visible borders between the content area and sidebars have been removed for a cleaner look.

Theme Toggle

The theme includes a built-in 3-way theme toggle that cycles through:

Auto — follows system preference
Light — forces light mode
Dark — forces dark mode

The toggle state is persisted in localStorage under the starlight-theme key.

Customizing the Toggle

The toggle uses --sl-color-text-accent for its color. Override this variable to change the toggle’s appearance.