Temas

Configura 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.

{
  "theme": "jam"
}

Temas disponibles

Las capturas de pantalla muestran la interfaz en inglés.

JamNebulaPulsar

El tema predeterminado. Diseño con logo en el encabezado y un fondo con gradiente radial derivado de tu color principal. Bordes redondeados (6-24px).

Ver ejemplo en vivo

{
  "theme": "jam"
}

Tipografía

Cada tema incluye fuentes cargadas desde Google Fonts:

Recomendamos los valores predeterminados; están ajustados para cada tema. Si necesitas un estilo diferente, configura fonts en docs.json para cambiar todo el sitio a una fuente de Google:

{
  "fonts": {
    "family": "Lora"
  }
}

Usa fuentes independientes para encabezados y cuerpo:

{
  "fonts": {
    "heading": { "family": "Space Grotesk" },
    "body": { "family": "Inter" }
  }
}

Cualquier fuente de Google funciona. Configura solo family y el build la obtiene automáticamente. Para alojar tú mismo una fuente personalizada, agrega source (URL o ruta relativa a /) y format:

{
  "fonts": {
    "family": "AcmeSans",
    "source": "/fonts/acme-sans.woff2",
    "format": "woff2"
  }
}

Configura weight para un cuerpo de texto más ligero (o más pesado). Esto es útil para fuentes geométricas delicadas como Geist:

{
  "fonts": {
    "family": "Geist",
    "weight": 200
  }
}

weight establece el peso del texto del cuerpo únicamente; los encabezados mantienen los pesos más pesados 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 cualquier cosa más allá del campo fonts (anular fuentes de código, ajustar pesos por nivel de encabezado o cargar fuentes web que no sean de Google), consulta CSS personalizado.

Colores personalizados

Personaliza la paleta predeterminada para que coincida con la identidad de tu marca:

{
  "theme": "jam",
  "colors": {
    "primary": "#635BFF",
    "light": "#7C75FF",
    "dark": "#4F46E5"
  }
}

Modo oscuro

Todos los temas incluyen 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
  }
}

Configura default solo para sugerir un modo inicial mientras sigues permitiendo que los usuarios cambien. Agrega strict: true para eliminar el interruptor por completo y bloquear el sitio a ese modo.

Para probar el modo oscuro durante el desarrollo, usa el interruptor de la barra de navegación o emúlalo en DevTools:

1. Abre DevTools
2. Presiona Cmd+Shift+P (Mac) o Ctrl+Shift+P (Windows)
3. Busca "Emulate CSS prefers-color-scheme: dark"

Para un control detallado sobre los estilos del modo oscuro, usa CSS personalizado.

¿Qué sigue?