Temas
Elige un tema integrado — Jam, Nebula o Pulsar — para controlar tipografía, diseño, espaciado y modo oscuro. Personaliza colores para tu marca.
Establece theme en docs.json para controlar el diseño, la tipografía, el espaciado y el comportamiento del modo oscuro. Hay tres temas disponibles: jam (predeterminado), nebula y pulsar.
Las capturas de pantalla muestran la interfaz en inglés.
{
"theme": "jam"
}Temas Disponibles
El tema predeterminado. Diseño con logo en la cabecera y fondo de gradiente radial derivado de tu color primario. Bordes redondeados (6-24px).
{
"theme": "jam"
}Tipografía
Cada tema incluye fuentes cargadas desde Google Fonts:
| Tema | Títulos | Cuerpo | Código |
|---|---|---|---|
| Jam | Inter | Inter | JetBrains Mono |
| Nebula | IBM Plex Mono | IBM Plex Mono | IBM Plex Mono |
| Pulsar | Inter | Inter | JetBrains Mono |
Se recomienda usar los valores predeterminados, ya que están ajustados para cada tema. Si necesitas un aspecto diferente, establece fonts en docs.json para cambiar la fuente de todo el sitio a una Google Font:
{
"fonts": {
"family": "Lora"
}
}Usa fuentes separadas para títulos y cuerpo:
{
"fonts": {
"heading": { "family": "Space Grotesk" },
"body": { "family": "Inter" }
}
}Cualquier Google Font es compatible — basta con definir family y el build la descargará automáticamente. Para alojar una fuente personalizada, añade source (URL o ruta relativa a /) y format:
{
"fonts": {
"family": "AcmeSans",
"source": "/fonts/acme-sans.woff2",
"format": "woff2"
}
}Para opciones más avanzadas que el campo fonts — como sobreescribir fuentes de código, ajustar pesos por nivel de título o cargar webfonts que no sean de Google — consulta CSS Personalizado.
Colores Personalizados
Sobreescribe la paleta predeterminada para ajustarla a tu identidad de marca:
{
"theme": "jam",
"colors": {
"primary": "#635BFF",
"light": "#7C75FF",
"dark": "#4F46E5"
}
}| Color | Uso |
|---|---|
primary | Enlaces, botones, acentos |
light | Estados hover, resaltados |
dark | Estados activos, acentos en modo oscuro |
Los colores se aplican tras el siguiente build. En desarrollo local, reinicia el servidor de desarrollo para ver los cambios.
Usa una herramienta de color como Coolors o Realtime Colors para generar una paleta armoniosa.
¿Necesitas más que colores? CSS Personalizado te permite sobreescribir fuentes, espaciado, ancho del contenido, radios de borde, estilos de llamadas y detalles a nivel de componente. Los temas establecen los valores predeterminados; el CSS personalizado es la vía de escape para todo lo que CSS pueda controlar.
Modo Oscuro
Todos los temas incluyen modo oscuro. Por defecto, Jamdesk sigue la preferencia del sistema del usuario y ofrece un selector 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 visitantes nuevos |
strict | boolean | false | Cuando es true, oculta el selector de la barra de navegación y mantiene a los visitantes en el modo default |
Establece solo default para sugerir un modo inicial sin impedir que los usuarios cambien. Añade strict: true para eliminar el selector por completo y bloquear el sitio en ese modo.
Para probar el modo oscuro durante el desarrollo, usa el selector de la barra de navegación o emúlalo en DevTools:
- Abre DevTools
- Pulsa 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.