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

# Configuration reference: all docs.json settings

> Complete reference for all configuration options in docs.json — name, theme, colors, logo, favicon, navbar, and navigation for your documentation site.

All site settings for your 通用文档站点 documentation are controlled through a single `docs.json` file in the root of your docs directory. This page documents every available option so you can configure your site's appearance, branding, and navigation exactly the way you want.

## Complete example

The following example shows a fully configured `docs.json` with all commonly used fields:

```json theme={null}
{
  "$schema": "https://mintlify.com/docs.json",
  "name": "My Product Docs",
  "theme": "willow",
  "colors": {
    "primary": "#4F6AF0",
    "light": "#E8ECFD",
    "dark": "#2C3E9E"
  },
  "favicon": "/favicon.svg",
  "logo": {
    "light": "/logo/light.svg",
    "dark": "/logo/dark.svg"
  },
  "navbar": {
    "primary": {
      "type": "github",
      "href": "https://github.com/your-org/your-repo"
    }
  },
  "navigation": {
    "groups": [
      { "group": "Get Started", "pages": ["introduction", "quickstart"] }
    ]
  }
}
```

## Top-level fields

<ParamField path="$schema" type="string">
  The Mintlify JSON schema URL. Set this to `https://mintlify.com/docs.json` to enable autocomplete and validation in editors that support JSON Schema, such as VS Code.
</ParamField>

<ParamField path="name" type="string" required>
  Your site's display name. This appears in the navbar and is used as the default browser tab title when no page title is set. Keep it short — typically your product or company name.
</ParamField>

<ParamField path="theme" type="string">
  The visual theme applied to your entire docs site. Available values are `willow`, `luma`, `palm`, `almond`, `aspen`, `maple`, and `sequoia`. Each theme has a distinct layout and typographic style. See the [Themes reference](/configuration/themes) for a full comparison.
</ParamField>

<ParamField path="favicon" type="string">
  Path to your site's favicon file, relative to the root of your docs directory. SVG and PNG formats are both supported. SVG is recommended because it scales cleanly at any size.

  Example: `"/favicon.svg"`
</ParamField>

## Colors

The `colors` object controls the accent colors used throughout your site. These colors are applied to links, buttons, active states, and other interactive elements. They work in combination with your chosen theme.

<ParamField path="colors.primary" type="string">
  The main accent color for your site. Used for links, highlighted navigation items, and interactive UI elements. Provide a hex color value, for example `"#4F6AF0"`.
</ParamField>

<ParamField path="colors.light" type="string">
  A lighter variant of your primary color, applied in light mode contexts such as hover states, backgrounds, and subtle highlights. Provide a hex color value, for example `"#E8ECFD"`.
</ParamField>

<ParamField path="colors.dark" type="string">
  A darker variant of your primary color, applied in dark mode contexts. Provide a hex color value, for example `"#2C3E9E"`.
</ParamField>

## Logo

The `logo` object lets you specify separate image assets for light and dark mode. Providing both ensures your logo looks correct regardless of which mode your readers use.

<ParamField path="logo.light" type="string">
  Path to your logo image displayed in light mode, relative to the root of your docs directory. SVG format is recommended for sharp rendering at all sizes.

  Example: `"/logo/light.svg"`
</ParamField>

<ParamField path="logo.dark" type="string">
  Path to your logo image displayed in dark mode. This is typically a version of your logo with inverted or lighter colors to remain visible against dark backgrounds.

  Example: `"/logo/dark.svg"`
</ParamField>

## Navbar

The `navbar.primary` field adds a prominent call-to-action element to the right side of your top navigation bar. You can choose from three types depending on how you want to direct readers.

| Type     | Description                                                                          |
| -------- | ------------------------------------------------------------------------------------ |
| `github` | Displays the GitHub icon alongside a star count, linking to your repository.         |
| `link`   | Renders a plain text link with custom label text.                                    |
| `button` | Renders a filled button, ideal for a primary CTA such as "Get started" or "Sign up". |

**Example — GitHub link:**

```json theme={null}
{
  "navbar": {
    "primary": {
      "type": "github",
      "href": "https://github.com/your-org/your-repo"
    }
  }
}
```

**Example — custom button:**

```json theme={null}
{
  "navbar": {
    "primary": {
      "type": "button",
      "label": "Get started",
      "href": "https://app.example.com/signup"
    }
  }
}
```

<Note>
  Changes to `docs.json` take effect after reloading the preview server. If you are running `mint dev` locally, save the file and refresh your browser to see updates.
</Note>