Northwestern Starlight Theme

pnpm

pnpm add @nu-appdev/northwestern-starlight-theme

npm

npm i @nu-appdev/northwestern-starlight-theme

yarn

yarn add @nu-appdev/northwestern-starlight-theme

bun

bun add @nu-appdev/northwestern-starlight-theme

Brand Colors

Purple palette mapped to Starlight’s accent and semantic color slots with dark mode support.

Typography

Akkurat Pro body text and Poppins headings loaded from the Northwestern CDN. No font packages to install.

Styled Components

Branded topbar, sidebar indicators, cards, tables, code blocks, badges, asides, and tabs.

Mermaid Diagrams

Optional diagram support with Northwestern colors and a fullscreen pan/zoom viewer.

Configuration

Add the plugin to your Starlight config. Colors, typography, navigation, and component styling apply automatically.

astro.config.ts

import starlight from "@astrojs/starlight";
import { defineConfig } from "astro/config";
import northwesternTheme from "@nu-appdev/northwestern-starlight-theme";

export default defineConfig({
    integrations: [
        starlight({
            plugins: [northwesternTheme()],
            title: "My Docs",
        }),
    ],
});