Temas
Elige un tema integrado (Jam, Nebula, Pulsar, Halo o Dusk) para controlar tipografía, diseño, espaciado y modo oscuro, y ajusta los colores a tu marca.
Define theme en docs.json para controlar el diseño, la tipografía, el espaciado y el comportamiento del modo oscuro. Hay cinco temas disponibles: jam (predeterminado), nebula, pulsar, halo y dusk.
Las capturas de pantalla muestran la interfaz en inglés.
{
"theme": "jam"
}Prueba cada tema en esta documentación antes de elegir. Selecciona uno en Preview a theme, en la parte superior de la barra lateral. En dispositivos móviles, abre el menú de navegación. El preview dura hasta que cierres el navegador.
Temas disponibles
El tema predeterminado. Diseño con el logotipo en el encabezado y un fondo con degradado radial derivado de tu color principal. Bordes redondeados (6-24 px).
{
"theme": "jam"
}Tipografía
Cada tema incluye fuentes cargadas desde Google Fonts:
| Tema | Encabezados | Cuerpo | Código |
|---|---|---|---|
| Jam | Inter | Inter | JetBrains Mono |
| Nebula | IBM Plex Mono | IBM Plex Mono | IBM Plex Mono |
| Pulsar | Inter | Inter | JetBrains Mono |
| Halo | Figtree | Figtree | JetBrains Mono |
| Dusk | IBM Plex Serif | Inter | JetBrains Mono |
Recomendamos los valores predeterminados; están ajustados a cada tema. Si necesitas un aspecto diferente, define fonts en docs.json para cambiar la fuente de todo el sitio por una de Google Fonts:
{
"fonts": {
"family": "Lora"
}
}Usa fuentes distintas para los encabezados y el cuerpo del texto:
{
"fonts": {
"heading": { "family": "Space Grotesk" },
"body": { "family": "Inter" }
}
}Cualquier fuente de Google Fonts funciona. Basta con definir family para que el build la obtenga automáticamente. Para alojar tú mismo una fuente personalizada, agrega source (una URL o una ruta relativa que empiece por /) y format:
{
"fonts": {
"family": "AcmeSans",
"source": "/fonts/acme-sans.woff2",
"format": "woff2"
}
}Define weight para un cuerpo de texto más ligero (o más grueso). Esto resulta útil para fuentes geométricas delicadas como Geist:
{
"fonts": {
"family": "Geist",
"weight": 200
}
}weight solo define el peso del texto del cuerpo; los encabezados conservan los pesos más gruesos de cada tema, por lo que tu jerarquía tipográfica se mantiene intacta. También funciona en la forma body: "body": { "family": "Geist", "weight": 200 }.
Para todo lo que quede fuera del campo fonts (sustituir las fuentes de código, ajustar los pesos por nivel de encabezado o cargar fuentes web que no sean de Google), consulta CSS personalizado.
Colores personalizados
Sustituye la paleta predeterminada para que coincida con la identidad de tu marca:
{
"theme": "jam",
"colors": {
"primary": "#635BFF",
"light": "#7C75FF",
"dark": "#4F46E5"
}
}| Color | Uso |
|---|---|
primary | Enlaces, botones, acentos |
light | Estados de hover, resaltados |
dark | Estados activos, acentos del modo oscuro |
Los colores surten efecto después de tu próximo build. En desarrollo local, reinicia el servidor de desarrollo para ver los cambios.
Usa una herramienta de colores como Coolors o Realtime Colors para generar una paleta armoniosa.
¿Necesitas algo más que colores? CSS personalizado te permite sustituir los colores de la página, el espaciado, los radios de borde, los estilos de los recuadros y los detalles a nivel de componente. Los temas definen los valores predeterminados; el CSS personalizado es la vía de escape para todo lo que el CSS pueda modificar.
Modo oscuro
Todos los temas incluyen el modo oscuro. De forma predeterminada, Jamdesk sigue la preferencia del sistema del usuario y ofrece un interruptor en la barra de navegación. Tu paleta de colores se adapta automáticamente.
Fija el sitio a un modo específico con appearance en docs.json:
{
"appearance": {
"default": "dark",
"strict": true
}
}| Campo | Valores | Predeterminado | Descripción |
|---|---|---|---|
default | "system" | "light" | "dark" | "system" | Modo inicial para los visitantes que llegan por primera vez |
strict | boolean | false | Cuando es true, oculta el interruptor de la barra de navegación para que los visitantes permanezcan en default |
Define default solo para sugerir un modo inicial sin dejar de permitir que los usuarios lo cambien. Agrega strict: true para eliminar por completo el interruptor y bloquear el sitio en ese modo.
Para probar el modo oscuro durante el desarrollo, usa el interruptor de la barra de navegación o emúlalo en las DevTools:
- Abre las DevTools
- Presiona Cmd+Shift+P (Mac) o Ctrl+Shift+P (Windows)
- Busca "Emulate CSS prefers-color-scheme: dark"
Para un control detallado de los estilos del modo oscuro, usa CSS personalizado.