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.
' - '@type': Question name: '¿Puede un agente de IA configurar el subtema y sus ajustes?' acceptedAnswer: '@type': Answer text: '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.
' - '@type': Question name: '¿Qué versiones de Drupal admite un subtema de DXPR Theme?' acceptedAnswer: '@type': Answer text: '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.
' - '@type': Question name: '¿Sobrescribirá mi subtema actualizar DXPR Theme?' acceptedAnswer: '@type': Answer text: '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.
' - '@type': TechArticle headline: 'Crear un subtema de DXPR Theme (Drupal 11)' description: '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.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:52:45+0000' dateModified: '2026-10-24T19:36:26+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-theme/crear-subtema/crear-subtema-dxpr-theme' articleSection: 'Glosario de Drupal' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-theme/crear-subtema/crear-subtema-dxpr-theme' description: '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.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://dxpr.com/es' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: es --- [Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende Drupal](/es/hc/documentation/learn-drupal) /[Glosario de Drupal](/es/hc/documentation/learn-drupal/drupal-glossary) # Crear un subtema de DXPR Theme (Drupal 11) Aprende DrupalGlosario de Drupal ## En esta guía 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](/es/drupal-agent-skills). ## Preguntas sobre subtemas de DXPR Theme ### ¿Necesito un subtema para cambiar colores y tipos de letra? 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. ### ¿Puede un agente de IA configurar el subtema y sus ajustes? 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. ### ¿Qué versiones de Drupal admite un subtema de DXPR Theme? 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. ### ¿Sobrescribirá mi subtema actualizar DXPR Theme? 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.