@myerscode/starlight-theme-yeti

A clean, modern Starlight theme with Tailwind CSS styling, icon support, and collapsible linked sidebar groups.

Features

• Tailwind CSS v4 styling
• Icon support via astro-icon (use [lucide:name] syntax in sidebar labels)
• Collapsible, linkable sidebar groups
• Branded 404 page out of the box — add your own src/content/docs/404.md to replace it
• Colour palettes via the palette option: yeti (default, monochrome silver) or black, blue, green, orange, purple, red or yellow
• Changelog page via the changelog option: renders a Keep a Changelog file with per-release badges, linked from the sidebar (auto-generated or custom)
• Header navigation via the headerLinks option, with icon support and current-page highlighting
• Page actions via the pageActions option: copy the page as Markdown, or open it in ChatGPT or Claude
• Custom components: header, sidebar, pagination, table of contents, hero, footer and more

Installation

npm install @myerscode/starlight-theme-yeti

This theme ships as source (.ts / .astro). You also need the peer dependencies installed in your project:

npm install @astrojs/starlight astro

Usage

Add the theme as a Starlight plugin in your astro.config.mjs, and wire up Tailwind and icons:

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import icon from 'astro-icon';
import tailwindcss from '@tailwindcss/vite';
import starlightThemeYeti from '@myerscode/starlight-theme-yeti';
import { linkableGroups } from '@myerscode/starlight-theme-yeti/sidebar';

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
  integrations: [
    icon(),
    starlight({
      title: 'My Docs',
      plugins: [starlightThemeYeti()],
      customCss: ['./src/styles/tailwind.css'],
      sidebar: linkableGroups([
        { label: '[lucide:rocket] Welcome', slug: '' },
      ]),
    }),
  ],
});

Create ./src/styles/tailwind.css in your project (the Tailwind entry lives in the consuming project, not the theme):

@layer base, starlight, theme, components, utilities;
@import '@astrojs/starlight-tailwind';
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

Code blocks

The theme configures Expressive Code with:

• Themes: github-light-default and github-dark-default
• Style tokens: border and radius matching the theme (--sl-color-gray-5, 0.5rem), accent-coloured active tab indicator, no drop shadow, 40% text-marker opacity

Everything is overridable — set expressiveCode in your Starlight config and your values win. Set expressiveCode: false to disable Expressive Code entirely.

starlight({
  plugins: [starlightThemeYeti()],
  // Pick different Shiki themes — your values override the theme's defaults
  expressiveCode: { themes: ['vitesse-dark', 'vitesse-light'] },
})

Configuration

The plugin accepts an optional config object to override individual components:

starlightThemeYeti({
  overrides: {
    // Replace a component with your own
    Footer: './src/components/MyFooter.astro',
    // Disable an override and fall back to Starlight's default
    Hero: false,
  },
  // Image for the built-in 404 page: a path relative to your project root,
  // or `false` to disable it. Defaults to the theme's artwork.
  notFoundImage: './src/assets/not-found.svg',
  // Colour palette: 'yeti' (default) | 'black' | 'blue' | 'green' | 'orange' | 'purple' | 'red' | 'yellow'.
  palette: 'blue',
  // Keep a Changelog file rendered at /changelog/ and linked from the sidebar
  // (a string is shorthand for `{ file }`; `slug`, `label` and `showInFooter` are optional).
  changelog: { file: './CHANGELOG.md', showInFooter: true },
})

Changelog placement

The changelog link works with both sidebar modes:

• Auto-generated sidebar (no sidebar config): the link is appended to the end of the navigation.

• Custom sidebar: the link is appended to the end by default. To position it yourself, add an entry pointing at the changelog anywhere in your sidebar — the theme wires it to the rendered page, keeping your position and label:

  sidebar: [
    { label: 'Guides', items: [{ autogenerate: { directory: 'guides' } }] },
    { label: '[lucide:history] Release Notes', slug: 'changelog' },
    { label: 'Reference', items: [{ autogenerate: { directory: 'reference' } }] },
  ],

  Either slug: 'changelog' or link: '/changelog/' is recognised (matching your changelog.slug if customised). The changelog is an injected route rather than a content page, so without this rewiring a bare slug entry would fail Starlight's validation.

If you replace the theme's Sidebar component via overrides and use an auto-generated sidebar, the theme can't add the link for you — define sidebar or set showInFooter: true.

Example

A demo site showcasing every component and setting lives in example/. It consumes the theme source directly, so it doubles as a development playground:

pnpm install
cd example && pnpm dev

License

MIT