Customization

Exquisitus is mainly layered CSS over Starlight. Understanding the layer order means your own styles win predictably.

Adding custom CSS

Pass additional stylesheets via the customCss option in your Starlight configuration.

astro.config.mjs

export default defineConfig({
  integrations: [
    starlight({
      plugins: [starlightThemeExquisitus()],
     customCss: ['./src/styles/custom.css'],
    }),
  ],
});

Unlayered CSS automatically sits above any @layer block in the cascade, so it overrides the theme without specificity tricks.

Theme options

The plugin takes an options object.

endMark

Type	Default
Boolean	true

Renders an editorial end mark: a small centred terminal that closes each content page’s prose, in the tradition of a printed article’s end sign. It never appears on the splash, whose colophon already closes that page. Set to false to omit the mark entirely.

astro.config.mjs

export default defineConfig({
  integrations: [
    starlight({
     plugins: [starlightThemeExquisitus()],
     plugins: [starlightThemeExquisitus({ endMark: false })],
    }),
  ],
});

Cascade layers

Exquisitus declares two cascade layers, in order:

@layer starlight, exquisitus;

All theme styles live inside @layer exquisitus. If you author layered CSS of your own, declare where your layers sit relative to the others to control the cascade explicitly:

src/styles/custom.css

@layer starlight, exquisitus, my-overrides;

@layer my-overrides {
  /* Wins over everything in the theme */
}

Token overrides

Exquisitus maps its palette onto Starlight’s --sl-color-* custom properties. Override any of them from your own stylesheet to retune the palette without forking the theme:

src/styles/custom.css

:root {
  --sl-color-accent: oklch(0.65 0.18 150);
  --sl-color-accent-high: oklch(0.80 0.14 150);
  --sl-color-accent-low: oklch(0.45 0.14 150);
}

Note

All color in Exquisitus is authored in OKLCH. Matching the color space keeps lightness perceptually even across hues, but hex and hsl() overrides work too.

Exquisitus also exposes theme-specific tokens under the --sl-exquisitus-* namespace:

Token	Default	Role
--sl-exquisitus-font-register	Alegreya Sans, system-ui, …	Heading, title & chrome typeface
--sl-exquisitus-font-reading	Literata Variable, Georgia, …	Reading-column body typeface
--sl-exquisitus-ease	cubic-bezier(0.22, 1, 0.36, 1)	Transition timing curve
--sl-exquisitus-hero-columns	2.1fr 1fr	Splash hero copy-to-image column ratio
--sl-exquisitus-cta	honey amber	Primary button fill
--sl-exquisitus-cool	petrol-teal	Code and information accent color

Overrides placed in unlayered CSS apply in both modes unless you scope them to :root[data-theme='light'] or :root[data-theme='dark'].

Added components

FeatureGrid

Exquisitus exports a feature grid component. FeatureGrid is the theme’s own splash layout, an editorial alternative to CardGrid’s uniform grid. Import it in any MDX page:

import FeatureGrid from 'starlight-theme-exquisitus/components/FeatureGrid.astro';

FeatureGrid wraps Starlight’s <Card> components and accepts a layout prop ('lead' or 'alternating'). See the Feature Grid showcase for live examples and arrangement options.

Design system

This theme was developed using the Impeccable design system. You can find its files, DESIGN.md and PRODUCT.md, in the repository root. Read them if you’re curious how the theme was put together.