mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
locadex-agent[bot]
bbb1a08ed3
Co-authored-by: locadex-agent[bot] <217277504+locadex-agent[bot]@users.noreply.github.com>
57 lines
3.6 KiB
Plaintext
57 lines
3.6 KiB
Plaintext
---
|
|
title: "Temas"
|
|
description: "Elige la apariencia de tu documentación."
|
|
mode: "frame"
|
|
keywords: ["selección de temas", "Mint", "Maple", "personalización de la apariencia"]
|
|
---
|
|
|
|
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 dark:hidden" src={`https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/themes/${value}-light.png`} alt={title} noZoom />
|
|
<img className="mt-0 rounded-2xl group-hover:scale-105 transition-all hidden dark:block" src={`https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/themes/${value}-dark.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">
|
|
Ver la vista previa
|
|
</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">Conceptos clave</label>
|
|
<h1 className="mt-1 mb-2 text-2xl sm:text-3xl text-gray-900 tracking-tight dark:text-gray-200 font-semibold">Temas</h1>
|
|
<label className="text-lg prose prose-gray dark:prose-invert">Personaliza la apariencia de tu documentación<br /><br />Configura [theme](/es/organize/settings#param-theme) en docs.json usando uno de los siguientes temas.</label>
|
|
|
|
<br />
|
|
|
|
<div className="mt-10 grid grid-cols-1 sm:grid-cols-2 gap-8 not-prose">
|
|
<ThemeCard title="Mint" value="mint" description="Tema de documentación clásico con diseños comprobados y navegación familiar." href="https://mint.mintlify.app" />
|
|
|
|
<ThemeCard title="Maple" value="maple" description="Estética moderna y limpia, perfecta para productos de IA y SaaS." href="https://maple.mintlify.app" />
|
|
|
|
<ThemeCard title="Palm" value="palm" description="Tema fintech sofisticado con amplia personalización para documentación empresarial." href="https://palm.mintlify.app" />
|
|
|
|
<ThemeCard title="Willow" value="willow" description="Elementos esenciales depurados para una documentación sin distracciones." href="https://willow.mintlify.app" />
|
|
|
|
<ThemeCard title="Linden" value="linden" description="Aires retro de terminal con tipografías monoespaciadas para esa estética hacker de los 80." href="https://linden.mintlify.app" />
|
|
|
|
<ThemeCard title="Almond" value="almond" description="Organización basada en tarjetas con diseño minimalista para una navegación intuitiva." href="https://almond.mintlify.app" />
|
|
|
|
<ThemeCard title="Aspen" value="aspen" description="Documentación moderna diseñada para navegación compleja y componentes personalizados." href="https://aspen.mintlify.app" />
|
|
</div>
|
|
</div>
|