> ## 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.

# Apply branding: colors, logo, and favicon in docs.json

> Apply your brand colors, logo, and favicon to your 通用文档站点 documentation site through simple settings in docs.json for a consistent experience.

通用文档站点 lets you customize your site's appearance to match your brand — colors, logo, favicon, and overall theme. All of these settings live in `docs.json`, so you can apply your brand identity in one place without touching individual pages or writing custom CSS.

## Colors

Set your brand colors in the `colors` block inside `docs.json`. 通用文档站点 uses three color roles to cover both light and dark mode:

```json docs.json theme={null}
"colors": {
  "primary": "#4F6AF0",
  "light": "#E8ECFD",
  "dark": "#2C3E9E"
}
```

* **primary** — used for buttons, links, and interactive elements across your site
* **light** — used as an accent color in light mode backgrounds and highlights
* **dark** — used as an accent color in dark mode backgrounds and highlights

All three values accept hex color codes.

## Logo

Add your logo by providing separate image paths for light and dark mode. Using two versions ensures your logo remains legible regardless of which mode your users prefer.

```json docs.json theme={null}
"logo": {
  "light": "/logo/light.svg",
  "dark": "/logo/dark.svg"
}
```

Store your logo files in a `/logo/` directory at the root of your docs folder. SVG format is recommended because it scales cleanly at any resolution.

## Favicon

Set your favicon with a single line in `docs.json`. The favicon appears in browser tabs and bookmarks.

```json docs.json theme={null}
"favicon": "/favicon.svg"
```

Place your favicon file at the root of your docs folder. SVG is the preferred format, but `.png` and `.ico` are also supported.

## Theme

通用文档站点 offers several built-in themes that control the overall layout and visual style of your site. Set your theme with the `"theme"` key in `docs.json`:

```json docs.json theme={null}
"theme": "willow"
```

Available themes:

| Theme     | Description                                                                               |
| --------- | ----------------------------------------------------------------------------------------- |
| `willow`  | Minimal and elegant — a clean, understated style that keeps the focus on your content     |
| `luma`    | Sleek and developer-focused — sharp lines and a modern feel suited to technical audiences |
| `palm`    | Spacious and airy — generous whitespace that gives your content room to breathe           |
| `almond`  | Approachable — warm tones and rounded elements that feel welcoming and friendly           |
| `aspen`   | Bold and technical — high-contrast presentation suited to reference documentation         |
| `maple`   | Sidebar-focused — places emphasis on navigation, ideal for large documentation sets       |
| `sequoia` | Information-rich — a dense layout that fits more content on screen at once                |

<Tip>
  Choose a `primary` hex color that matches your brand's main action color — the one you use for buttons and links in your product. Consistent use of that color across your docs and your product creates a seamless experience for your users.
</Tip>