Skip to main content
通用文档站点 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:
docs.json
"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. 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.
docs.json
"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.
docs.json
"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:
docs.json
"theme": "willow"
Available themes:
ThemeDescription
willowMinimal and elegant — a clean, understated style that keeps the focus on your content
lumaSleek and developer-focused — sharp lines and a modern feel suited to technical audiences
palmSpacious and airy — generous whitespace that gives your content room to breathe
almondApproachable — warm tones and rounded elements that feel welcoming and friendly
aspenBold and technical — high-contrast presentation suited to reference documentation
mapleSidebar-focused — places emphasis on navigation, ideal for large documentation sets
sequoiaInformation-rich — a dense layout that fits more content on screen at once
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.