Customization
Colors
Section titled “Colors”The theme uses Starlight’s CSS custom property system for colors. Override them in your own CSS file to change the palette.
Dark Mode Colors
Section titled “Dark Mode Colors”Dark mode is the default. The theme maps Tailwind’s gray scale to Starlight’s --sl-color-gray-* variables.
Light Mode Colors
Section titled “Light Mode Colors”Light mode activates when data-theme="light" is set on the root element.
The gray scale is inverted for proper contrast.
Accent Colors
Section titled “Accent Colors”The theme uses a warm orange accent:
- Dark mode:
#fb923c - Light mode:
#c2410c
These are applied to --sl-color-accent, --sl-color-accent-high, and --sl-color-accent-low.
Override these variables in your custom CSS to change the accent.
Typography
Section titled “Typography”Font Family
Section titled “Font Family”The theme ships with Inter via @fontsource/inter.
To use a different font, override --sl-font in your custom CSS.
Font Sizes
Section titled “Font Sizes”The base font size is 14px. Heading sizes use fixed rem values for a compact feel:
- h1:
1.45rem - h2:
1.2rem - h3:
1.05rem - h4:
0.95rem - h5:
0.85rem - h6:
0.8rem
Body text uses 0.9rem.
Layout
Section titled “Layout”Content Width
Section titled “Content Width”The main content column is 55rem wide, up from Starlight’s default 45rem and nova’s 50rem.
Sidebar Width
Section titled “Sidebar Width”Both sidebars are set to 17rem, slightly narrower than the defaults to give more room to content.
Borders
Section titled “Borders”All visible borders between the content area and sidebars have been removed for a cleaner look.
Theme Toggle
Section titled “Theme Toggle”The theme includes a built-in 3-way theme toggle that cycles through:
- Auto — follows system preference
- Light — forces light mode
- Dark — forces dark mode
The toggle state is persisted in localStorage under the starlight-theme key.
Customizing the Toggle
Section titled “Customizing the Toggle”The toggle uses --sl-color-text-accent for its color. Override this variable to change the toggle’s appearance.