Skip to content
starlight-theme-md3

Component Samples

This page shows how common Starlight components look with the MD3 theme applied. The examples keep Starlight’s original component model in place while the theme adds token-driven color, shape, state, and spacing.

中文内容需要稳定的行高、清晰的段落节奏和不过度夸张的标题层级。这个主题的目标是让 wiki 和技术文档保持高信息密度，同时拥有 Material You 的色彩角色、tonal surface 和清晰状态反馈。

Badges

Section titled “Badges”
defaultnotetipsuccesscautiondanger

Controls

Section titled “Controls”

Buttons

Filled actionTonal actionOutlined actionPressed stateDisabled state

Inline nav

OverviewTokensComponents

Asides

Section titled “Asides”

Cards

Section titled “Cards”

Token layer

Material system tokens define color, type, shape, elevation, motion, and state.

Bridge layer

Starlight variables consume MD3 roles through a small compatibility bridge.

Docs density

The default density is compact enough for repeated reference reading.

Design token referenceReview how MD3 system roles map to Starlight custom properties.

Tabs

Section titled “Tabs”

The theme uses CSS variables as the source of truth for visual decisions.

Steps

Section titled “Steps”
  1. Define Material-style --md-sys-* tokens.
  2. Bridge those tokens into the current Starlight --sl-* variables.
  3. Style high-impact documentation surfaces first: sidebar, header, prose, code, asides, cards.
  4. Add component overrides only when a consuming site needs a markup-level change.

Code

Section titled “Code”

Inline code should be legible without becoming a bright pill in the paragraph.

import starlight from '@astrojs/starlight';
import md3Theme from 'starlight-theme-md3';


export default {
  integrations: [
    starlight({
      plugins: [md3Theme()],
    }),
  ],
};

Table

Section titled “Table”
Surface MD3 role Starlight target
Page shell surface-container-lowest --sl-color-bg
Main content surface main > .content-panel
Header surface-container --sl-color-bg-nav
Sidebar active item secondary-container [aria-current='page']
Code block surface-container-low Markdown pre
Aside tip primary-container .starlight-aside--tip

Blockquote

Section titled “Blockquote”

A docs theme should make structure obvious, keep reading comfortable, and avoid turning every component into a large app card.