Skip to main content

Themes


Mint

Mint

Classic documentation theme with time-tested layouts and familiar navigation.
See preview
Maple

Maple

Modern, clean aesthetics perfect for AI and SaaS products.
See preview
Palm

Palm

Sophisticated fintech theme with deep customization for enterprise documentation.
See preview
Willow

Willow

Stripped-back essentials for distraction-free documentation.
See preview
Linden

Linden

Retro terminal vibes with monospace fonts for that 80s hacker aesthetic.
See preview
Almond

Almond

Card-based organization meets minimalist design for intuitive navigation.
See preview
Aspen

Aspen

Modern documentation crafted for complex navigation and custom components.
See preview
Sequoia

Sequoia

Minimal, elegant layouts designed for large-scale content-focused documentation.
See preview

Understanding color configuration

The colors object in docs.json controls the color scheme of your documentation. Each theme applies these colors differently, so understanding how they work is essential for achieving the look you want.

Color properties explained

You configure colors in docs.json using three properties:
docs.json
{
  "colors": {
    "primary": "#3B82F6",
    "light": "#60A5FA",
    "dark": "#1E40AF"
  }
}
​
primary
string
required
The main accent color for your documentation. Used for emphasis in light mode, including links, buttons, and interactive elements. The specific usage varies by theme.
​
light
string
The accent color for dark mode. When users switch to dark mode, this color replaces primary for emphasis elements. If not specified, primary is used in both modes.
​
dark
string
The color for buttons, hover states, and secondary interactive elements across both light and dark modes. Some themes use this for additional emphasis or contrast.

How themes use colors

Different themes apply color properties in different ways:Mint, Maple, and Palm use primary for links and emphasis in light mode, light for links and emphasis in dark mode, and dark for button backgrounds and hover states.Willow and Linden apply primary more prominently to navigation elements and headings, with dark used for interactive states.Almond and Aspen use primary for card borders and accents, light for dark mode variants, and dark for button fills.Sequoia applies colors minimally, using primary sparingly for key interactive elements only.

Common color patterns

Here are proven color combinations for different use cases:
{
  "colors": {
    "primary": "#3B82F6",
    "light": "#60A5FA",
    "dark": "#1E40AF"
  }
}

Testing color combinations

To ensure your colors work well across both light and dark modes:
  1. Check contrast ratios - Use a tool like WebAIM’s Contrast Checker to verify your colors meet WCAG AA standards (4.5:1 for normal text, 3:1 for large text).
  2. Test in both modes - Toggle between light and dark mode in your documentation to see how colors appear. The mode toggle is in the top navigation bar.
  3. Preview on different screens - Colors appear differently on various displays. Test on multiple devices if possible.
  4. Use the CLI preview - Run mint dev locally to see changes in real-time before deploying.

Troubleshooting contrast issues

If you encounter white-on-white text or other contrast problems:
This typically happens when primary is too light. Button text color is automatically determined based on the background color.Solution: Use a darker shade for your primary color, or specify a darker dark color for button backgrounds:
{
  "colors": {
    "primary": "#3B82F6",
    "dark": "#1E40AF"
  }
}
This occurs when dark is too similar to your background color or when it’s not specified.Solution: Ensure dark has sufficient contrast with both light and dark backgrounds:
{
  "colors": {
    "primary": "#3B82F6",
    "light": "#60A5FA",
    "dark": "#1E40AF"
  }
}
Each theme interprets color properties differently based on its design system.Solution: Preview your documentation with different themes to see how colors are applied. You may need to adjust values for your chosen theme:
mint dev
Then change the theme value in docs.json and refresh to compare.

Theme-specific color behavior

Each theme has unique characteristics that affect how colors appear:Mint - Traditional documentation theme with high color saturation. Colors are prominent and used frequently throughout the interface.Maple - Modern, clean aesthetic with subtle color usage. Colors appear primarily on interactive elements and accents.Palm - Enterprise-focused with sophisticated color application. Uses colors for hierarchy and emphasis in complex layouts.Willow - Minimalist theme with restrained color usage. Colors are used sparingly for maximum impact.Linden - Retro terminal theme with monospace fonts. Colors are applied to mimic classic terminal interfaces.Almond - Card-based design with colors used for borders and subtle accents. Color application is gentle and non-intrusive.Aspen - Modern theme with bold color usage in navigation and components. Colors are used to create visual hierarchy.Sequoia - Content-first theme with minimal color application. Colors appear only on essential interactive elements.

Advanced color customization

For more control over specific elements, you can use custom CSS:
custom.css
:root {
  --primary: #3B82F6;
  --primary-light: #60A5FA;
  --primary-dark: #1E40AF;
}

/* Override specific elements */
.docs-button {
  background-color: var(--primary-dark);
}

.docs-link:hover {
  color: var(--primary);
}
Then reference your custom CSS file in docs.json:
docs.json
{
  "styling": {
    "css": "/custom.css"
  }
}
Custom CSS is an advanced feature. Changes may affect your documentation’s appearance in unexpected ways. Always test thoroughly before deploying.