Skip to main content

Herencia de temas

Un tema puede heredar de otro y redefinir solo lo que cambia. Es la forma recomendada de crear variantes: en lugar de duplicar todo el tema base, declaras un tema hijo que apunta al padre y sobrescribe unas pocas variables o archivos.

Declarar el tema padre​

En el tema.config del hijo, el atributo temaBase nombra al padre:

<?xml version="1.0" encoding="utf-8"?>
<Tema temaBase="Compacto"
      titulo="Compacto Azul"
      descripcion="'Compacto Azul' tema predeterminado"
      autor="Crono"
      version="1.1">
  <Vars>
    <Var nombre="primario" tipo="Color">#054484</Var>
    <Var nombre="primary"  tipo="Color">$primario</Var>
    <Var nombre="body-bg"  tipo="Color">white</Var>
    <Var nombre="body-color" tipo="Color">black</Var>
    <!-- solo lo que cambia respecto de Compacto -->
  </Vars>
</Tema>

La cadena de herencia puede tener varios niveles (un hijo puede heredar de otro tema que a su vez hereda).

Sobrescribir variables​

Basta con declarar un <Var> con el mismo nombre que en el padre; el valor del hijo gana. El resto de variables se heredan tal cual. El ejemplo de Compacto Azul es exactamente esto: hereda de Compacto y solo redefine el color primario, los fondos, algunos colores de la barra lateral y de la grilla de datos. Todo lo demás (radios, tipografías, botones, tamaños) viene del padre.

Sobrescribir archivos (SCSS y vistas)​

Cuando cambiar variables no basta, el hijo puede sobrescribir archivos colocándolos en la misma ruta relativa que en el padre:

  • SCSS: crear un parcial con el mismo nombre en el wwwroot/ del hijo reemplaza al del padre. Así puedes rehacer, por ejemplo, _menu.scss sin tocar el resto del tema.
  • Vistas Razor: copiar una vista en la misma ruta dentro de Views/ del hijo la reemplaza para ese tema.
  • Recursos estáticos: cualquier archivo de wwwroot (imágenes, fuentes, JS) se puede sobrescribir de la misma manera.

Resolución de archivos​

Al resolver un archivo (una vista, un parcial, un recurso estático), el sistema busca primero en el tema activo, luego en su tema base, y así hacia arriba por la cadena de herencia, cayendo finalmente en los archivos del propio proyecto web y de los módulos. La primera coincidencia gana. Ese orden de búsqueda es lo que hace que un tema hijo pueda cambiar solo lo justo y apoyarse en el padre para todo lo demás.

tip

Mantén los temas hijos lo más pequeños posible: cuantas menos variables y archivos sobrescriban, más fácil será heredar mejoras del tema base cuando este se actualice.