> ## Documentation Index
> Fetch the complete documentation index at: https://docs.3cool.cc/llms.txt
> Use this file to discover all available pages before exploring further.

# Themes: choose the right visual style for your docs

> Compare the available visual themes in 通用文档站点 and learn how to switch themes in docs.json to match your product's style and audience.

通用文档站点 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

<AccordionGroup>
  <Accordion title="willow">
    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.
  </Accordion>

  <Accordion title="luma">
    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.
  </Accordion>

  <Accordion title="palm">
    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.
  </Accordion>

  <Accordion title="almond">
    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.
  </Accordion>

  <Accordion title="aspen">
    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.
  </Accordion>

  <Accordion title="maple">
    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.
  </Accordion>

  <Accordion title="sequoia">
    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.
  </Accordion>
</AccordionGroup>

## Applying a theme

To apply a theme, set the `theme` field at the top level of your `docs.json` file:

```json theme={null}
{
  "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:

```json theme={null}
{
  "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](/configuration/settings).

<Tip>
  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.
</Tip>