Theme Setup

Install the package with Starlight and Astro:

pnpm add @sentry/starlight-theme @astrojs/starlight astro

Add the theme plugin to starlight() and use the exported monochrome code theme:

astro.config.mjs

import starlight from "@astrojs/starlight";
import sentryStarlightTheme, {
  monochromeCodeTheme,
} from "@sentry/starlight-theme";
import { defineConfig } from "astro/config";

export default defineConfig({
  integrations: [
    starlight({
      title: "My Sentry project",
      plugins: [sentryStarlightTheme()],
    }),
  ],
  markdown: {
    shikiConfig: {
      theme: monochromeCodeTheme,
    },
  },
});

Theme Plugin

sentryStarlightTheme() installs the shared CSS, component overrides, dark-only behavior, and Expressive Code defaults.

hideThemeSelectboolean

Hide Starlight’s theme selector. Defaults to true because this theme is intentionally dark-only.

show-theme-select.js

sentryStarlightTheme({
  hideThemeSelect: false,
});

Local CSS

Project customCss loads after the shared package CSS. Use it for small product-specific adjustments, not shared theme behavior.

custom-css.js

starlight({
  customCss: ["./src/styles/docs.css"],
  plugins: [sentryStarlightTheme()],
});