v0.1.1: Starlight 0.42.6

The studio now previews Starlight 0.42.6, the latest release, so you design on the same Starlight your site runs.

Open the studio · See the product page

Highlights

Design on the current Starlight

The preview now runs Starlight 0.42.6, built with Astro 7.3.8. Your exports name 0.42.6 as their target. The controls, the presets and the Export dialog work exactly as they did in 0.1.0.

Under the hood: Starlight 0.42.5 and 0.42.6 changed one thing in their stylesheets: icons no longer get cut off when you pinch-zoom in Firefox. No selector that the studio styles moved. Apart from the line that names the version, every export is byte-identical to the one 0.1.0 made.

Upgrading

• This release targets Starlight 0.42.6 and Astro 7.3.8. A theme you exported from 0.1.0 still applies to any Starlight 0.42 site, so you do not need to export it again. APPLY-THEME.md from either release stops your agent only when your site's Starlight minor version is not 0.42.
• Exports changed only in the version they name. The header of theme.css and the target line of APPLY-THEME.md now say 0.42.6. Export again only if you want your files to name the newer version.
• Your saved themes still open. Themes saved in your browser, share links and imported settings files load as before.

Known limits

• It is built for Starlight 0.42.6. Starlight is pre-1.0, so a later release can change markup that some styles rely on. APPLY-THEME.md names the version it was built for and tells your agent to stop on a mismatch.
• Some settings only take effect at build time. Syntax-highlighting themes and a few page options cannot change live. The preview approximates them, and APPLY-THEME.md lists the config changes to make.
• The PNG screenshot is drawn in the browser. A full page of a long document can take several seconds, and a few effects such as backdrop-filter may be missing. For a pixel-exact image, use your browser's own screenshot tool.
• Safari itself is untested. The WebKit tests run in Playwright's build of the engine on Windows, not in Apple's Safari.

What's next

Two additions are planned:

• Presets inspired by popular community themes, each one credited and linked to the real theme.
• A compact font picker that shows each font in its own typeface.

What would you like to see? Tell us in Discussions, under Ideas.

Get involved

• Found a bug? Open an issue.
• Made a theme you like? Post its share link in Show and tell.
• Have a question? Ask it in Q&A.

---

Full changelog: CHANGELOG.md

v0.1.0: Design your Starlight theme on real pages

A free visual theme editor for Starlight: restyle colors, fonts, layout and components on real Starlight pages, then export one CSS file.

Open the studio · See the product page · No account, nothing to install

Why this exists

Starlight gives you a polished docs site in minutes. Making it look like your product takes longer. You read up on its CSS custom properties, guess at selectors, rebuild, and then check dark mode separately.

Starlight's built-in color theme editor sets an accent color and a gray. This studio covers the rest: typography, layout, the header, the sidebar, code blocks and the common components. You see every change on real Starlight pages as you make it. When the theme looks right, you take home one CSS file and the exact steps to apply it.

Who it's for

• Starlight site owners who want their docs to match their brand, without learning Starlight's CSS first.
• Technical writers who want to restyle a docs site without waiting for a front-end developer.
• Developers who work with coding agents. One click copies a single message with the steps and the stylesheet. Paste it into your agent, and it applies the theme for you.
• Theme authors who want to start a theme visually, then hand-tune the exported CSS.

From first idea to finished theme

1. Start from a preset

Pick one of nine presets, from Starlight's own default look to Editorial Serif and High Contrast Mono. Every value stays editable, so a preset is a starting point rather than a commitment.

2. Design on real pages

Shape the whole look with 78 controls in 11 groups. They cover colors, typography, layout, the header, the sidebar, the table of contents, content, components, code, the footer and page options. Each change appears at once on four sample pages: a style guide, a long document, a landing page and the 404 page.

Not sure which control styles something? Turn on Inspect and click it on the page, and the studio opens the controls that style it. Want a different navigation? The Structure editor lets you drag pages and groups into a new sidebar.

Under the hood: the preview is an actual Starlight 0.42.4 build running in a frame, not a mockup. Your edits go into a stylesheet that the studio adopts into each preview page, so the page restyles without a reload. Colors run through Starlight's own palette algorithm, which tunes the lightness of each color role.

3. Check it before you ship

Split view shows the same page in light mode and dark mode, side by side, from one theme. The contrast check above the preview tests the main text color pairs in both modes. It uses WCAG AA by default, or AAA if you raise the floor. It flags a failing pair the moment you create one. Device widths run from a 390-pixel phone to a 2560-pixel ultra-wide screen.

Under the hood: each device width is a real viewport width, so Starlight's own responsive layout applies. The studio then scales the frame down to fit your window.

4. Export a theme you own

Export offers two ways to get the theme onto your own site, and each takes one click:

• Copy for your coding agent. One message holds the setup steps and the whole stylesheet. Paste it into Claude Code, Codex or Cursor with your project open, and the agent applies the theme.
• Download the files (.zip). One folder holds theme.css and APPLY-THEME.md, numbered steps you can follow yourself.

File	What it holds
theme.css	Only the values that differ from Starlight's defaults, as plain CSS
APPLY-THEME.md	Numbered steps to apply the theme, for you or your coding agent
The agent message	The same steps and the whole stylesheet, in one paste
<theme-name>.customizer.json	Your settings, so you can import the theme later and keep editing
A PNG screenshot	The current page in light or dark mode, for a design review or a pull request

Before you take anything, a file viewer shows every file in its own tab, with Copy and Download.

Applying a theme takes a few minutes, and there is no plugin to install:

1. Add the theme's CSS to src/styles/theme.css in your project.
2. Add it as the last entry of Starlight's customCss option.
3. If you picked a web font, install the package that APPLY-THEME.md names, such as @fontsource-variable/inter.
4. Rebuild your site. A running astro dev server picks up the change on its own.

// astro.config.mjs
starlight({
  title: 'My Docs',
  customCss: [
    // ...any stylesheets you already have
    './src/styles/theme.css', // last, so the theme wins any tie
  ],
}),

If you rebuilt the sidebar in the Structure editor, APPLY-THEME.md also gives you the new sidebar array to paste in.

The exported files are yours to use however you like, and no attribution is required. theme.css, APPLY-THEME.md and the agent message each carry one line that links back to the studio, and you are free to delete it.

Under the hood: theme.css is deliberately unlayered, so its place at the end of customCss decides every tie with another stylesheet. The export is deterministic: the same theme always produces the same file, which keeps diffs in your repository small. A round-trip test applies real exports to a freshly created Starlight site and compares the computed styles with the studio's preview. The steps are tested to reproduce what you saw, not only to read well. The agent message wraps the stylesheet in a code fence longer than any run of backticks inside it, so nothing in the CSS can end the fence early.

5. Share it with a link

Click Share in the top bar and copy the link. Anyone who opens it sees your exact theme on the page you were viewing. If they already have a theme of their own saved, the studio asks before replacing it. Every change is one undo step, so trying someone else's theme is safe.

Under the hood: the whole theme travels in the link's #svc= fragment. Browsers never send a URL fragment to a server, and the studio removes it from the address bar once it has read it. A theme that arrives from a link or an imported file is checked against the controls before it reaches an export. So a crafted link cannot slip code into APPLY-THEME.md or the agent message, or extra rules into theme.css. Its sidebar can only link to web, mail or relative addresses.

Private by design

The studio has no backend, no account and no analytics. Your theme stays in your browser until you export or share it. The only outside request the studio makes loads preview web fonts from jsDelivr.

Built to be trusted

• 291 unit tests cover the CSS, APPLY-THEME.md and agent-message generators, share-link decoding, the checks on outside themes, sidebar-link safety, color math, and undo and redo.
• 14 browser suites cover every control's effect, Inspect, the Structure editor, share links, the Export dialog and the PNG export. Six of them also run on Firefox and WebKit.
• A round-trip test shows that an export reproduces the preview on a fresh Starlight site.
• Golden files pin the exact export output, so an unintended change fails a test.

The project is open source under the MIT license.

Known limits

• It is built for Starlight 0.42.4. Starlight is pre-1.0, so a later release can change markup that some styles rely on. APPLY-THEME.md names the version it was built for and tells your agent to stop on a mismatch.
• Some settings only take effect at build time. Syntax-highlighting themes and a few page options cannot change live. The preview approximates them, and APPLY-THEME.md lists the config changes to make.
• The PNG screenshot is drawn in the browser. A full page of a long document can take several seconds, and a few effects such as backdrop-filter may be missing. For a pixel-exact image, use your browser's own screenshot tool.
• Safari itself is untested. The WebKit tests run in Playwright's build of the engine on Windows, not in Apple's Safari. Those runs found one bug before release: in Split view, the dark side could miss an edit. This release includes the fix, and a browser test now checks it on every engine.

What's next

Two additions are planned:

• Presets inspired by popular community themes, each one credited and linked to the real theme.
• A compact font picker that shows each font in its own typeface.

What would you like to see? Tell us in Discussions, under Ideas.

Get involved

• Found a bug? Open an issue.
• Made a theme you like? Post its share link in Show and tell.
• Have a question? Ask it in Q&A.
• Like the project? A star helps other Starlight users find it.

---

Starlight Visual Customizer is an independent, open-source project by Prisant Labs. It is not affiliate...