Starlight Theming

Starlight exposes its entire visual design through CSS custom properties. Override any variable to change colors, typography, and layout — with or without Tailwind.

When to Use

• Changing the color palette (accent color, grays, backgrounds)
• Swapping fonts or adjusting text sizes
• Applying a consistent brand identity
• Integrating Tailwind CSS into a Starlight project

When Not to Use

• Replacing entire UI sections (header, footer, sidebar) — use starlight-custom-component instead
• Per-page layout changes without global theming intent

Mindset

Starlight styles live in CSS cascade layers. Unlayered CSS always wins.