mintlify__docs/customize/themes.mdx

---
title: "Themes"
description: "Choose and configure a theme to customize your documentation site's colors, dark mode behavior, layout style, and overall visual appearance."
mode: "frame"
keywords: ["theme selection", "Mint", "Maple", "Palm", "Willow", "Linden", "Almond", "Aspen", "Sequoia", "customize appearance"]
boost: 3
---

{/* vale Mintlify.Semicolons = NO */}

export const ThemeCard = ({ title, value, description, href }) => {
  return (
    <a className="mt-4 gap-10 group cursor-pointer" href={href}>
      <div>
        <img className="mt-0 rounded-2xl group-hover:scale-105 transition-all block" src={`https://raw.githubusercontent.com/mintlify/docs/refs/heads/main/images/themes/${value}.png`} alt={title} noZoom />
      </div>
      <div>
        <div className="mt-4 flex space-x-2 items-center">
        <h4 className="text-base font-medium text-gray-900 dark:text-gray-200">{title}</h4>
        <label className="text-sm text-gray-500 dark:text-gray-400">"{value}"</label>
      </div>
        <div className="mt-1 prose-sm prose-gray mb-2 text-gray-500 dark:text-gray-400">{description}</div>
        <div className="flex items-center gap-1 mt-2 text-green-600 group-hover:text-green-800 dark:text-green-500 dark:group-hover:text-green-400">
          <span className="text-sm font-medium">
            See preview
          </span>
          <svg className="size-3 group-hover:translate-x-0.5 transition-all" width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.05566 2.70996L9.91678 7.57107L5.05566 12.4322" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
      </div>
    </a>
  );
};

{/* vale Mintlify.Semicolons = YES */}

<div className="pt-10 pb-24 px-4 max-w-3xl mx-auto prose prose-gray">
  <label className="eyebrow h-5 text-primary dark:text-primary-light text-sm font-semibold">Core Concepts</label>
  <h1 className="mt-1 mb-2 text-2xl sm:text-3xl text-gray-900 tracking-tight dark:text-gray-200 font-semibold">Themes</h1>
  <label className="text-lg prose prose-gray dark:prose-invert">Customize the appearance of your documentation<br /><br />Configure [theme](/organize/settings-appearance#theme) in docs.json using one of the following themes.</label>

<br />

<div className="mt-10 grid grid-cols-1 sm:grid-cols-2 gap-8 not-prose">

<ThemeCard title="Mint" value="mint" description="Classic documentation theme with time-tested layouts and familiar navigation." href="https://mint.mintlify.site" />

<ThemeCard title="Maple" value="maple" description="Modern, clean aesthetics perfect for AI and SaaS products." href="https://maple.mintlify.site" />

<ThemeCard title="Palm" value="palm" description="Sophisticated fintech theme with deep customization for enterprise documentation." href="https://palm.mintlify.site" />

<ThemeCard title="Willow" value="willow" description="Stripped-back essentials for distraction-free documentation." href="https://willow.mintlify.site" />

<ThemeCard title="Linden" value="linden" description="Retro terminal vibes with monospace fonts for that 80s hacker aesthetic." href="https://linden.mintlify.site" />

<ThemeCard title="Almond" value="almond" description="Card-based organization meets minimalist design for intuitive navigation." href="https://almond.mintlify.site" />

<ThemeCard title="Aspen" value="aspen" description="Modern documentation crafted for complex navigation and custom components." href="https://aspen.mintlify.site" />

<ThemeCard title="Sequoia" value="sequoia" description="Minimal, elegant layouts designed for large-scale content-focused documentation." href="https://sequoia.mintlify.site" />

<ThemeCard title="Luma" value="luma" description="Clean, minimal design for polished documentation." href="https://luma.mintlify.site" />

</div>

</div>