Skip to main content
通用文档站点 offers several themes you can apply to your docs site by setting the theme field in docs.json. Each theme has a distinct visual style suited to different types of products and audiences — from minimal and developer-focused to warm and approachable. Picking the right theme helps your docs feel native to your product from the moment readers arrive.

Available themes

Minimal, elegant design with clean typography and generous whitespace. Willow is best suited for design-focused products and consumer-facing documentation where visual polish and readability are the top priority. It keeps the interface out of the way so your content can speak for itself.
Sleek, minimal layout that emphasizes code readability and fast navigation. Luma is ideal for developer-focused products and API-driven platforms where readers spend most of their time reading code samples and reference material. The layout keeps cognitive load low.
Spacious and airy layout that gives content room to breathe. Palm works well for developer tools where comfortable reading across long documents matters. The generous line spacing and padding make extended reading sessions less fatiguing.
Soft, approachable feel with warm tones that welcome non-technical readers. Almond is well-suited for consumer products and documentation aimed at users who may not have a technical background. Its visual warmth reduces the intimidation often associated with product documentation.
Bold, technical aesthetic with high contrast. Aspen is built for infrastructure, DevOps, and systems-level documentation where precision and authority matter. The strong visual hierarchy helps readers scan dense technical content quickly.
Warm, sidebar-focused layout designed for large documentation sets with deep navigation hierarchies. Maple makes it easy for readers to orient themselves within complex docs and jump between sections without losing their place.
Dense, information-rich layout that maximizes screen real estate. Sequoia is designed for API-heavy products where readers need to see as much content as possible at once — reference tables, parameter lists, and response schemas — without excessive scrolling.

Applying a theme

To apply a theme, set the theme field at the top level of your docs.json file:
{
  "theme": "willow"
}
Save the file and reload your preview server to see the change take effect. You can switch themes at any time without affecting your content or navigation structure.

Combining theme and colors

Themes define the overall layout and typographic style of your site. The colors object lets you further customize the accent colors layered on top of that theme. Together, they give you full control over how your docs look and feel. The following example pairs the luma theme with a sky-blue color palette:
{
  "theme": "luma",
  "colors": {
    "primary": "#0EA5E9",
    "light": "#BAE6FD",
    "dark": "#0369A1"
  }
}
Use colors.primary for your main brand color, colors.light for hover states and subtle backgrounds in light mode, and colors.dark for the equivalent in dark mode. For guidance on all color options, see the Settings reference.
Choose a theme that matches your audience. Developer tools often benefit from luma or aspen, which emphasize code readability and technical clarity. User-facing products tend to feel more approachable with willow or almond, which use softer layouts and warmer visual styles.