Crear un subtema de DXPR Theme (Drupal 11).

Learn DrupalDrupal-woordenlijst

DXPR Theme cambia los colores, los tipos de letra, el encabezado, el espaciado y el diseño desde su panel de ajustes, así que la mayoría de los sitios no necesitan ni una línea de CSS. Un subtema es para el resto: tu propia hoja de estilos, sustituciones de plantillas, bibliotecas extra o una paleta de colores que distribuyes con el código. El subtema hereda cada hoja de estilos y cada plantilla de DXPR Theme, tiene sus propios ajustes, y las actualizaciones de DXPR Theme no lo tocan.

Esta guía cubre DXPR Theme 8.2 en Drupal 10.3 y Drupal 11. El kit de inicio que usa viene dentro del tema en dxpr_theme/dxpr_theme_STARTERKIT; no se usa el comando generate-theme del núcleo de Drupal, porque DXPR Theme trae su propio kit de inicio y su propio comando.

Antes de empezar

Añade DXPR Theme y activa su módulo de ayuda, que el tema necesita antes de que Drupal lo instale:

composer require drupal/dxpr_theme
drush en dxpr_theme_helper

1. Genera el subtema desde el kit de inicio

La forma más rápida es el comando Drush que ofrece DXPR Theme Helper. Ejecútalo desde la raíz de tu proyecto; valida el nombre de máquina, copia el kit de inicio en themes/custom y renombra todo por ti:

drush dxt:subtheme:create northwind_theme --theme-name="Northwind Theme"

Sin argumentos, el comando pide ambos nombres. Sin Drush, usa el script que trae el tema: entra en web/themes/contrib/dxpr_theme, haz los scripts ejecutables una vez con chmod +x scripts/*, ejecuta ./scripts/create_subtheme.sh e indica el nombre legible y el nombre de máquina cuando se te pida. El script solo funciona desde esa carpeta.

En ambos casos obtienes web/themes/custom/northwind_theme, con los archivos y la configuración del kit de inicio renombrados a tu nombre de máquina y el marcador THEMETITLE sustituido en los archivos info y de esquema.

2. Actívalo y guarda los ajustes una vez

  1. Ve a Apariencia y elige Instalar y establecer como predeterminado para tu subtema.
  2. Abre los Ajustes del subtema y pulsa Guardar la configuración sin cambiar nada.

Ese primer guardado genera la hoja de estilos de ajustes del tema nuevo. El subtema parte de los ajustes por defecto del kit de inicio, no de los ajustes que hiciste en DXPR Theme. Para trasladarlos, expórtalos desde DXPR Theme e impórtalos en el subtema:

drush dxt:config:export --theme=dxpr_theme --file=theme.yml
drush dxt:config:import theme.yml --theme=northwind_theme

Desde entonces el panel funciona igual que para DXPR Theme: los colores, la tipografía, el encabezado, el pie y el espaciado pertenecen al subtema.

Mantén las regiones del subtema idénticas a las del tema base. El kit de inicio declara las mismas catorce regiones que DXPR Theme, y la opción Ocultar regiones de DXPR Theme Helper en el contenido se refiere a ellas por su nombre.

3. Qué te da el kit de inicio

  • northwind_theme.info.yml: base theme: dxpr_theme, las regiones y una biblioteca, global-styling, que carga tu hoja de estilos. Un bloque comentado libraries-override enumera las bibliotecas de DXPR Theme que es más probable que desactives, de dxpr_theme/bootstrap-5 a dxpr_theme/helper-classes.
  • css/dxpr_theme_subtheme.css: se carga en cada página después de las hojas de estilos del tema. Tu CSS va aquí.
  • templates/: vacío salvo por un README. Copia aquí cualquier plantilla de dxpr_theme/templates para sustituirla.
  • config/install y config/schema: los ajustes por defecto y su esquema, renombrados a tu tema.
  • color-settings.json: tus propias paletas de colores con nombre, que aparecen en la lista de esquemas de color junto a las integradas.
  • logo.svg, favicon.ico, screenshot.png: sustitúyelos por los tuyos.

4. Escribe CSS que siga los ajustes

DXPR Theme escribe sus ajustes en variables CSS: --dxt-color-* para la paleta y --dxt-setting-* para tipografía, espaciado y diseño, y las aplica a las variables --bs-* de Bootstrap. Usa las variables en tu hoja de estilos en vez de valores fijos, y tu CSS seguirá al panel cuando alguien cambie un color o un tipo de letra.

/* css/dxpr_theme_subtheme.css */
.card {
  border-radius: 1rem;
  border-color: color-mix(in srgb, var(--dxt-color-base) 20%, transparent);
}

.dxpr-theme-footer h2 {
  font-family: var(--dxt-setting-headings-font-face);
  color: var(--dxt-color-footertext);
}

El color base, los colores de acento, el texto, los titulares, los enlaces, las tarjetas y el pie tienen una variable. La lista completa está en el README del tema, en CSS Custom Properties (Variables) Reference.

5. Sustituye plantillas y bibliotecas

Copia la plantilla que quieres cambiar de themes/contrib/dxpr_theme/templates a la carpeta templates de tu subtema, conserva el nombre del archivo, edítalo y vacía las cachés. Drupal elige primero la copia del subtema.

Para quitar una hoja de estilos o un script del tema base, descomenta la línea libraries-override: de tu archivo info junto con las líneas de las bibliotecas que quieres quitar; ya están fijadas a false. Para añadir las tuyas, declara más bibliotecas en northwind_theme.libraries.yml y enuméralas en libraries en el archivo info, como hace el kit de inicio con global-styling.

6. Ofrece tus clases a las personas editoras en DXPR Builder

Las clases declaradas en dxpr_builder_classes: en el archivo info del subtema aparecen en el selector de clases de DXPR Builder, así las personas editoras aplican tu banda oscura o tu panel de cristal sin escribir ningún nombre de clase. Da estilo a la clase en dxpr_theme_subtheme.css, limitada a los elementos de DXPR Builder a los que va destinada.

7. Distribuye una paleta de colores con el tema

Añade esquemas con nombre a color-settings.json en la raíz del subtema. Cada esquema fija las mismas claves que usa el panel: base, basetext, link, accent1, accent2, text, headings, card, footer, header, pagetitle y el resto. El esquema aparece en la lista de esquemas de color del formulario de ajustes, así un sitio cambia a la paleta de marca con un clic.

8. Actualizar DXPR Theme más adelante

  1. Actualiza el tema base con Composer: composer update drupal/dxpr_theme --with-dependencies.
  2. Ejecuta las actualizaciones de la base de datos y vacía las cachés.
  3. Abre el formulario de ajustes del subtema y guárdalo otra vez, para que la hoja de estilos de ajustes se regenere con las variables nuevas.
  4. Lee las notas de versión por si hay cambios de plantillas o regiones, y compara cualquier plantilla que sustituyeras con la versión nueva.

Deja que tu agente de IA se encargue del tema

DXPR Theme 8.1.1 y versiones posteriores traen un skill de agente. Ejecuta drush dxt:setup-ai en tu proyecto, y tu agente de programación (Claude Code, Codex, Gemini CLI o Cursor) aprende los ajustes del tema y su significado. Describe la marca, y el agente fija los colores, la tipografía, el diseño del encabezado y el espaciado con los mismos ajustes en los que escribe el panel, para que los revises en el sitio. También puede crear el subtema con drush dxt:subtheme:create.

El skill de DXPR Builder hace lo mismo con las páginas, y Drush Webmaster con el contenido y las vistas. Ver los skills de agente en acción.

Preguntas sobre subtemas de DXPR Theme

No. Los colores, los tipos de letra, el encabezado, el pie, el espaciado y el diseño son ajustes del panel de DXPR Theme. Un subtema solo hace falta para tu propio CSS, sustituciones de plantillas, bibliotecas extra o una paleta que distribuyas con el código.

Sí. Tras drush dxt:setup-ai, el agente conoce los ajustes del tema y los cambia a partir de un brief, y puede crear el subtema él mismo con drush dxt:subtheme:create. Revisas el resultado en el sitio.

Las mismas que DXPR Theme 8.2: Drupal 10.3 y posteriores, y Drupal 11. El archivo info del kit de inicio también declara versiones anteriores, pero DXPR Theme 8.2 depende de módulos que necesitan Drupal 10.3.

No. Composer solo sustituye themes/contrib/dxpr_theme; tu subtema vive en themes/custom. Guarda el formulario de ajustes del subtema una vez tras una actualización para que su hoja de estilos recoja las variables nuevas.