Content
Customize your documentation site's appearance with colors, logos, and styling
Docs Kit provides extensive theming options to match your brand identity. Customize colors, logos, appearance modes, and more through the docs.config.ts file.
Choose from 10 built-in color palettes that automatically apply to your entire site:
Set your color palette in config/docs.config.ts:
{
"colorPalette": "teal"
}The color palette applies to:
Each color palette includes optimized light and dark mode variants that automatically adjust based on the user's theme preference.
Control the default theme and available options:
{
"appearance": {
"default": "light"
}
}The default color mode when users first visit your site.
Options:
"light" - Light mode (default)"dark" - Dark mode"system" - Follow system preference"appearance": {
"default": "system"
}User sees the default theme specified in config
User can toggle between light and dark modes using the theme switcher in the navbar
The selected theme is saved to browser localStorage and persists across visits
All colors, code blocks, and components automatically adjust to the active theme
Provide separate logos for light and dark modes:
{
"logo": {
"light": "/logo/light.svg",
"dark": "/logo/dark.svg"
}
}Path to logo displayed in light mode. Should work well on light backgrounds.
Recommended:
Path to logo displayed in dark mode. Should work well on dark backgrounds.
Recommended:
Create two versions of your logo:
light.svg - Dark logo for light modedark.svg - Light logo for dark modeOr use the same logo with different colors:
logo-dark-version.svg
logo-light-version.svgPlace logos in public/logo/:
public/
└── logo/
├── light.svg
└── dark.svgReference logos in config:
{
"logo": {
"light": "/logo/light.svg",
"dark": "/logo/dark.svg"
}
}Restart the development server to see changes:
bun devSVG files scale perfectly on all screen sizes and resolutions. PNG logos may appear blurry on high-DPI displays.
Size Guidelines:
Color Considerations:
Light Mode Logo:
- Use dark colors (#000000 - #333333)
- Or brand colors that contrast with white/light backgrounds
- Ensure text is readable
Dark Mode Logo:
- Use light colors (#FFFFFF - #E0E0E0)
- Or adjusted brand colors for dark backgrounds
- Maintain readabilitySet a custom favicon for browser tabs:
{
"favicon": "/favicon.svg"
}Path to favicon file in the public/ directory.
Supported formats:
.svg - Recommended, works in modern browsers.ico - Traditional format, best compatibility.png - Works but less optimal than SVGCreate a simple SVG favicon:
<!-- public/favicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect width="100" height="100" fill="#2DD4BF"/>
<text x="50" y="75" font-size="70" text-anchor="middle" fill="white">D</text>
</svg>Advantages:
Create multiple sizes for .ico:
Use a tool like favicon.io to generate:
{
"favicon": "/favicon.ico"
}Create a 32x32px PNG with transparency:
{
"favicon": "/favicon-32x32.png"
}Less optimal than SVG or ICO but widely supported.
Configure basic site information:
{
"name": "Your Documentation",
"description": "Comprehensive guides and documentation"
}The name of your documentation site. Used in:
"name": "Acme API Docs"A brief description of your documentation. Used for:
"description": "Complete API reference and guides for Acme platform"While most styling is handled by color palettes, you can add custom CSS for advanced customization.
Create a custom CSS file:
/* app/custom.css */
:root {
--custom-navbar-height: 80px;
}
.docs-navbar {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}Import in your app layout:
// app/layout.tsx
import './custom.css'Custom CSS can override theme consistency. Use built-in theming options when possible.
Docs Kit uses system fonts for optimal performance and readability:
Font Stack:
/* Body text */
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
sans-serif;
/* Code */
font-family:
"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;To use custom fonts, add them to your project:
Place fonts in public/fonts/:
public/
└── fonts/
├── custom-font-regular.woff2
└── custom-font-bold.woff2Create font definitions:
/* app/fonts.css */
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font-regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font-bold.woff2') format('woff2');
font-weight: 700;
font-display: swap;
}Override Chakra UI theme:
import { createSystem, defaultConfig } from '@chakra-ui/react'
const customConfig = {
...defaultConfig,
theme: {
tokens: {
fonts: {
body: { value: 'CustomFont, system-ui, sans-serif' }
}
}
}
}
export const system = createSystem(customConfig)Docs Kit automatically adapts to different screen sizes:
{
base: "0px", // Mobile
sm: "640px", // Small tablets
md: "768px", // Tablets
lg: "1024px", // Desktop
xl: "1280px", // Large desktop
"2xl": "1536px" // Extra large
}When setting up your theme, configure these key items:
{
"name": "My Docs",
"description": "Documentation site",
"colorPalette": "blue",
"appearance": {
"default": "light"
},
"logo": {
"light": "/logo/light.svg",
"dark": "/logo/dark.svg"
},
"favicon": "/favicon.svg"
}{
"name": "Acme API Documentation",
"description": "Comprehensive API guides and references for Acme platform",
"colorPalette": "purple",
"appearance": {
"default": "system"
},
"logo": {
"light": "/logo/acme-dark.svg",
"dark": "/logo/acme-light.svg"
},
"favicon": "/favicon.svg"
}Next, explore the complete Configuration Reference for all available options.