Crear un subtema (sub-theme) en Drupal 8

Un subtema o subtheme es un tema es sí mismo con la única particularidad que le indicamos que cargue todos los recursos de otro tema, al que podemos denominar tema padre, pudiendo de esta manera realizar personalizaciones sobre dicho tema sin tener que modificarlo directamente. Esto es importante desde dos puntos de vista:

• Un tema es la obra de un autor que ha decido, en la mayoría de los casos, distribuirlo de manera gratuita para su uso y modificación, pero que debemos respetar como tal. Cuando creamos un subtema lo que hacemos es crear un tema sobre la base de otro pero reconociendo explícitamente al que hemos tomado como base, señalándolo de esta manera en el código.
• Cuando se produce una actualización de un tema puede ser que se sobreescriban las plantillas y archivos de estilos entre otros. Esto se evita fácilmente si trabajamos sobre un subtema, ya que este no se sobreescribirá y mantendremos por lo tanto nuestras modificaciones.

Un tema en Drupal 8, y por lo tanto un subtema, debe tener como mínimo tres archivos:

• mi_tema.info.yml. Es el archivo básico de configuración del tema, en el cual se encuentran los datos de tipo administrativo como es el nombre, versión, autor, descripción, etc., y define las regiones y las librerías del tema.
• mi_tema.libraries.yml. Podemos definir las librerías como paquetes de código que son necesarios para un determinado fin, pudiendo ser éstas de estilos, de funcionalidades, etc. En este archivo se identificaran dichas librerías y sus dependencias, junto a sus rutas de acceso.
• style.css. Como mínimo debe existir una hoja de estilos, definida previamente en la librería con la cual poder aplicar estilos al tema. A partir de aquí, se pueden definir tantas hojas css y js como necesitemos.

Para mostrar como se crea un subtema en Drupal 8, vamos a tomar como padre el tema que viene por defecto en la instalación, llamado Bartik, y nos crearemos un subtema al que llamaremos mi_primer_subtema. El primer paso es crearnos la carpeta contenedora del tema dentro del directorio themes de nuestra instalación de Drupal, y que en nuestro caso, como ya hemos señalado será mi_primer_subtema.

Una vez que tenemos la carpeta del tema, nos crearemos el archivo mi_primer_subtema.info.yml, el cual deberá tener la siguiente información:

name: Mi primer subtema
type: theme
description: Este es un subtema de Bartik
core: 8.x
# Establecer el tema padre
base theme: bartik
# Definición de las librerías del tema
libraries:
  - mi_primer_subtema/global-styling
# Regiones
regions:
  header: Header
  primary_menu: 'Primary menu'
  secondary_menu: 'Secondary menu'
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  highlighted: Highlighted
  featured_top: 'Featured top'
  breadcrumb: Breadcrumb
  content: Content
  sidebar_first: 'Sidebar first'
  sidebar_second: 'Sidebar second'
  featured_bottom_first: 'Featured bottom first'
  featured_bottom_second: 'Featured bottom second'
  featured_bottom_third: 'Featured bottom third'
  footer_first: 'Footer first'
  footer_second: 'Footer second'
  footer_third: 'Footer third'
  footer_fourth: 'Footer fourth'
  footer_fifth: 'Footer fifth'

La declaración del tema padre se hace con la llave base theme: bartik, debiendo señalar el nombre de la carpeta contenedora del tema al que queremos hacer referencia y no a su nombre administrativo, el cual es Bartik (solo cambia la primera letra de minúscula a mayúscula, pero esto tiene una gran importancia). De esta manera, cuando carguemos nuestro subtema cargará también todos los recursos del tema padre. Las regiones las copiaremos tal cual de archivo info.yml de Bartik.  A continuación deberemos crearnos la librería mi_primer_subtema.libraries.yml. 

global-styling:
  css:
    component:
      css/style.css: {}

Aquí indicamos la ruta al archivo style.css en donde definiremos los estilos personalizados de nuestro sitio. Cualquier estilo que pongamos en este archivo sobreescribirá al establecido en el tema padre. De igual manera, cualquier plantilla del tema que pongamos en la carpeta mi_primer_subtema sobreescribirá a la establecida por el tema padre en el caso de que la definiera, y si no, las establecidas por Drupal por defecto. Trataremos detenidamente el tema de las plantillas en otra entrada.

Por lo tanto, ahora nos deberemos crear el archivo style.css en una carpeta llamada css dentro de mi_primer_subtema. Si bien un archivo de estilos es lo mínimo que necesitamos para personalizar un subtema, en muchas de las ocasiones también necesitaremos añadir elementos dinámicos mediante Javascript, los cuales también se señalan en esta librería.

global-styling:
    css:
        component:
            css/style.css: {}
    js:
        js/archivo.js: {}
    dependencies:
        - core/jquery

Y así tantos archivos como necesitemos. Una vez realizados todos estos pasos y subidos todos los archivos que hemos señalado a la carpeta contenedora del tema dentro de nuestra instalación de Drupal, si accedemos al menú Apariencia encontraremos nuestro subtema listo para ser instalado y activado.

Y con estos sencillos pasos hemos creado un subtema con el que podremos crear todas aquellas personalizaciones que nuestro sitio necesite sin miedo a perder dichos cambios en una posible actualización.