Applying the Mars Theme to Starlight Docs

ELI5

The Mars theme is our shared dark-mode design system. It uses warm browns, muted golds, and deep blacks — like the surface of Mars. Every devarno docs site (MERIDIAN, MANUAL, CRUMB) uses these same colors so they all look related.

Technical Deep Dive

Token System

The Mars palette is defined in CSS custom properties and mapped to Starlight’s --sl-* tokens:

:root {
  --crumb-void:     #0a0a0f;  /* Background */
  --crumb-oxide:    #e85d3e;  /* Primary accent */
  --crumb-signal:   #d4a574;  /* Secondary text */
  --crumb-dust:     #8b7e74;  /* Muted text */
  --crumb-regolith: #c4b5a0;  /* Body text */
  --crumb-surface:  #141419;  /* Card/sidebar bg */
}

Starlight Mapping

Critical Rule: Force Dark Mode

Never respect prefers-color-scheme: light. All Mars-themed surfaces are unconditionally dark:

<NextThemesProvider attribute="class" defaultTheme="dark"
                    forcedTheme="dark" disableTransitionOnChange>

Key Terms

• Token: A named CSS custom property that abstracts a color value.
• Starlight: The Astro documentation framework we use for all docs sites.
• choco Candy Themes: The 14-theme system managed by choco-hq that can override these tokens per-tenant.

Q&A

Q: Can I add a light mode toggle? A: No. Mars-themed surfaces are unconditionally dark. The ThemeSelect component should be empty or hidden.

Examples

Minimal Mars-themed Starlight config:

:root {
  --sl-color-bg: #0a0a0f;
  --sl-color-bg-nav: #141419;
  --sl-color-bg-accent: #e85d3e;
  --sl-color-white: #c4b5a0;
}