Temas
Elige un tema integrado — Jam, Nebula o Pulsar — para controlar la tipografía, el diseño, el espaciado y el modo oscuro. Personaliza los colores para que coincidan con 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"
}Las capturas de pantalla de esta página pueden mostrar la interfaz en inglés.
Temas disponibles
El tema predeterminado. Diseño con logo en el encabezado y fondo con degradado radial derivado de tu color primario. Bordes redondeados (6-24px).
{
"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 |
La compatibilidad con fuentes personalizadas llegará próximamente. Los temas actualmente utilizan las combinaciones anteriores con fuentes del sistema como respaldo.
Colores personalizados
Reemplaza 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 hover, resaltados |
dark | Estados activos, acentos en modo oscuro |
Los colores se aplican después del 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.
Modo oscuro
Todos los temas incluyen modo oscuro. Jamdesk sigue la preferencia del sistema del usuario y proporciona un interruptor en la barra de navegación. Tu paleta de colores se adapta automáticamente.
Para probar el modo oscuro durante el desarrollo, usa el interruptor de la barra de navegación o emúlalo en DevTools:
- Abre DevTools
- Presiona Cmd+Shift+P (Mac) o Ctrl+Shift+P (Windows)
- Busca "Emulate CSS prefers-color-scheme: dark"
Para un control detallado sobre los estilos del modo oscuro, usa CSS personalizado.