Saltar al contenido
duxt

Sobrescribir el tema

Cambiar un color, reemplazar un componente, añadir una primitiva de shadcn-vue.

La capa entrega el tema como archivos que puedes ensombrecer. Tres niveles, del menor al mayor — y el menor que resuelva el problema es el correcto, porque un componente que reemplazas es un componente que ahora mantienes.

Pasos

  1. Un color: redefine el token. La paleta es el conjunto neutro de shadcn como variables CSS. Redefine una en tu propia hoja de estilos; no hace falta bifurcar el archivo de la capa.
    :root {
  --primary: oklch(0.55 0.2 265);
}
.dark {
  --primary: oklch(0.7 0.18 265);
}

    Importan los dos bloques: el tema conmuta con una clase dark, no con una media query, así que un token definido una sola vez está mal en uno de los dos modos.
  1. Una pieza del diseño: crea el archivo. Nuxt resuelve primero tu componente del mismo nombre, así que reemplazar DuxtFooter es crear app/components/DuxtFooter.vue en tu proyecto. Los nombres, props y slots están en la referencia de componentes — un nombre documentado forma parte de la superficie pública, así que no se renombrará sin una versión mayor.
  2. Un slot, donde lo haya. DuxtPageFeedback emite feedback y expone su estado a través de un slot, de modo que puedes colgarle tu propio formulario sin reemplazar el componente — desarrollado en Recoger opiniones de página.
  3. Una primitiva nueva: usa la CLI. La capa posee sus componentes de shadcn-vue en lugar de importarlos, y components.json ya apunta la CLI al alias correcto:
pnpm dlx shadcn-vue@latest add tooltip
  1. Un componente para Markdown. Todo lo que esté en app/components/content/ se puede invocar desde una página con la sintaxis de bloque MDC. Tu propio archivo del mismo nombre reemplaza el de la capa — véase la referencia MDC.

Lista de comprobación

  • No se copió nada de la capa que un token pudiera haber cambiado
  • Cada token redefinido tiene valor para claro y para oscuro
  • Los componentes reemplazados se llaman exactamente como los nombra la referencia
  • pnpm build sigue representando todas las páginas (un override es donde se rompe el SSR)
¿Le ha resultado útil esta página?