---
title: "Guía de personalización"
description: "Aprende a personalizar cada aspecto de tu sitio Astro Lite."
publishedAt: 2026-07-03
author: "Admin"
tags: ["guia", "personalizacion", "tailwind"]
---

## Personalización completa

Astro Lite está diseñado para ser fácil de personalizar. Aquí te mostramos cómo.

### Cambiar tipografía

Edita los tokens de tipografía en `src/styles/tokens/typography.css`:

```css
:root {
  --text-base: clamp(1rem, 0.925rem + 0.375vw, 1.0625rem);
  /* Ajusta los valores clamp() para cambiar el tamaño base */
}
```

### Agregar nuevos temas

1. Crea un archivo CSS en `src/styles/themes/`
2. Define los tokens de color para light y dark mode
3. Importa el archivo en `global.css`
4. Agrega el tema a `themes.config.ts`

### Agregar nuevas páginas

1. Crea un archivo `.astro` en `src/pages/`
2. Usa `BaseLayout` como wrapper
3. Agrega el link a la navegación en `nav.config.ts`

### Personalizar componentes

Los componentes usan **CVA** (Class Variance Authority) para manejar variantes. Cada componente tiene un archivo `*.variants.ts` donde puedes agregar o modificar estilos.

Ejemplo de Button:

```typescript
// button.variants.ts
export const buttonVariants = cva(
  'inline-flex items-center justify-center...',
  {
    variants: {
      variant: {
        primary: 'bg-primary text-primary-foreground...',
        // Agrega tu variante personalizada
        gradient: 'bg-gradient-to-r from-brand-500 to-brand-700...',
      },
    },
  }
);
```

## Tips

- Usa los design tokens (`var(--color-brand-500)`) en lugar de colores hardcodeados
- Los componentes son modulares: importa solo lo que necesites
- El dark mode funciona automáticamente con los tokens semánticos
