mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
Brandon McConnell
1cab61588a
* docs: add Luma theme to docs Updates various documentation sections to officially include the new Luma theme. Adds Luma to the list of available themes and provides its description in relevant configuration and theme files. Extends "frame" mode compatibility to include the Luma theme, reflecting its support for this layout. * chore: losslessly compress images used https://tinypng.com
62 lines
3.6 KiB
Plaintext
62 lines
3.6 KiB
Plaintext
---
|
|
title: "Themes"
|
|
description: "Choose the appearance of your documentation."
|
|
mode: "frame"
|
|
keywords: ["theme selection", "Mint", "Maple", "Palm", "Willow", "Linden", "Almond", "Aspen", "Sequoia", "customize appearance"]
|
|
---
|
|
|
|
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://mintlify.s3.us-west-1.amazonaws.com/mintlify/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 class="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>
|
|
);
|
|
};
|
|
|
|
<div className="pt-10 pb-24 px-4 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#param-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.app" />
|
|
|
|
<ThemeCard title="Maple" value="maple" description="Modern, clean aesthetics perfect for AI and SaaS products." href="https://maple.mintlify.app" />
|
|
|
|
<ThemeCard title="Palm" value="palm" description="Sophisticated fintech theme with deep customization for enterprise documentation." href="https://palm.mintlify.app" />
|
|
|
|
<ThemeCard title="Willow" value="willow" description="Stripped-back essentials for distraction-free documentation." href="https://willow.mintlify.app" />
|
|
|
|
<ThemeCard title="Linden" value="linden" description="Retro terminal vibes with monospace fonts for that 80s hacker aesthetic." href="https://linden.mintlify.app" />
|
|
|
|
<ThemeCard title="Almond" value="almond" description="Card-based organization meets minimalist design for intuitive navigation." href="https://almond.mintlify.app" />
|
|
|
|
<ThemeCard title="Aspen" value="aspen" description="Modern documentation crafted for complex navigation and custom components." href="https://aspen.mintlify.app" />
|
|
|
|
<ThemeCard title="Sequoia" value="sequoia" description="Minimal, elegant layouts designed for large-scale content-focused documentation." href="https://sequoia.mintlify.app" />
|
|
|
|
<ThemeCard title="Luma" value="luma" description="Clean, minimal design for polished documentation." href="https://luma.mintlify.app" />
|
|
|
|
</div>
|
|
|
|
</div> |