CSS personalizado

Los temas de Jamdesk ofrecen valores predeterminados razonables, pero puedes añadir CSS personalizado para adaptarlo a tu marca o ajustar estilos específicos.

Añadir CSS personalizado

Crea un archivo style.css en la raíz de tu proyecto (la misma carpeta que tu docs.json). Jamdesk lo aplica automáticamente a todas las páginas; no se necesita ninguna entrada en docs.json.

Cualquier archivo .css en la raíz del proyecto funciona, no solo style.css, lo cual resulta útil al migrar desde otra herramienta. Cuando hay varios, Jamdesk los combina en orden alfabético según el nombre del archivo.

Ejecuta jamdesk dev para previsualizar el resultado localmente. Renderiza tu CSS personalizado de la misma forma que lo hace el sitio publicado.

/* Your custom styles */
.content h1 {
  font-size: 2.5rem;
}

Variables CSS

Jamdesk expone variables CSS para personalizaciones comunes. Sobrescríbelas en tu CSS personalizado:

:root {
  /* Typography */
  --font-family-sans: 'Inter', system-ui, sans-serif;
  --font-family-mono: 'JetBrains Mono', monospace;
  
  /* Spacing */
  --content-max-width: 900px;
  --sidebar-width: 280px;
  
  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

Variables de color

Los colores principales se configuran en docs.json. Para un control más preciso, sobrescribe estas variables:

:root {
  /* Light mode */
  --color-background: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #666666;
  --color-border: #e5e5e5;
  --color-code-bg: #f5f5f5;
}

[data-theme="dark"] {
  /* Dark mode */
  --color-background: #0a0a0a;
  --color-text: #fafafa;
  --color-text-muted: #a3a3a3;
  --color-border: #262626;
  --color-code-bg: #171717;
}

Personalizaciones comunes

Ajustar el ancho del contenido

:root {
  --content-max-width: 1000px;  /* Default: 900px */
}

Cambiar la fuente de los bloques de código

:root {
  --font-family-mono: 'Fira Code', monospace;
}

/* Ensure ligatures work if your font supports them */
pre code {
  font-variant-ligatures: common-ligatures;
}

Personalizar los estilos de enlace

.content a:not([class]) {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.content a:not([class]):hover {
  text-decoration-thickness: 2px;
}

Ajustar el espaciado de los encabezados

.content h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.content h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

Estilizar los callouts

/* Make Note callouts more prominent */
[data-callout="note"] {
  border-left-width: 4px;
  background: var(--color-primary-subtle);
}

Modo oscuro

Usa el selector [data-theme="dark"] para los estilos del modo oscuro:

/* Light mode */
.custom-banner {
  background: #f0f4ff;
  color: #1e3a5f;
}

/* Dark mode */
[data-theme="dark"] .custom-banner {
  background: #1e293b;
  color: #e2e8f0;
}

Segmentar componentes

Sobrescribe los estilos de componentes específicos:

/* Card component */
[data-component="card"] {
  border-radius: 16px;
}

/* Code blocks */
[data-component="code-block"] {
  border-radius: 8px;
}

/* Tabs */
[data-component="tabs"] [data-state="active"] {
  border-bottom-width: 3px;
}

Fuentes externas

Carga fuentes personalizadas con @import o @font-face:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-family-sans: 'Inter', system-ui, sans-serif;
}

O aloja las fuentes tú mismo:

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

Estilos responsivos

Usa media queries para ajustes responsivos:

/* Mobile adjustments */
@media (max-width: 768px) {
  .content h1 {
    font-size: 1.75rem;
  }
  
  :root {
    --content-max-width: 100%;
  }
}

Depuración

Usa las herramientas de desarrollo del navegador para inspeccionar elementos y encontrar los selectores correctos. Jamdesk usa atributos de datos para segmentar componentes:

• data-component="..." - Tipo de componente
• data-theme="light|dark" - Tema actual
• data-state="..." - Estado del componente (active, disabled, etc.)

Limitaciones

• El CSS se aplica globalmente; usa selectores específicos para evitar conflictos
• Algunos estilos internos de diseño usan !important y podrían requerir lo mismo para sobrescribirlos
• En la previsualización local (jamdesk dev), los cambios en tu(s) archivo(s) CSS se aplican al recargar el navegador; en tu sitio publicado, los cambios entran en vigor en el próximo build

¿Qué sigue?