---
url: 'https://dxpr.com/de/hc/dokumentation/dxpr-theme-lernen/sub-theme-erstellen/dxpr-theme-subtheme-erstellen'
title: 'Ein DXPR-Theme-Subtheme erstellen (Drupal 11) | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:30:36+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'DXPR Theme ändert Farben, Schriften, Header, Abstände und Layout über sein Einstellungs-Dashboard, sodass die meisten Sites keine Zeile CSS brauchen. Ein Subtheme ist für den Rest: Ihr eigenes Stylesheet, Template-Overrides, zusätzliche Libraries oder eine Farbpalette, die Sie mit dem Code ausliefern. Das Subtheme erbt jedes Stylesheet und Template von DXPR Theme, erhält eigene Einstellungen, und Updates von DXPR Theme lassen es unangetastet.'
tags:
  - 'Creating a sub-theme'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T08:30:36+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      '@type': FAQPage
      mainEntity:
        -
          '@type': Question
          name: 'Brauche ich ein Subtheme, um Farben und Schriften zu ändern?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>Nein. Farben, Schriften, Header, Footer, Abstände und Layout sind Einstellungen im DXPR-Theme-Dashboard. Ein Subtheme braucht es nur für eigenes CSS, Template-Overrides, zusätzliche Libraries oder eine Palette, die Sie mit dem Code ausliefern.</p>'
        -
          '@type': Question
          name: 'Kann ein KI-Agent das Subtheme und seine Einstellungen einrichten?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>Ja. Nach drush dxt:setup-ai kennt der Agent die Theme-Einstellungen und ändert sie aus einem Briefing, und er kann das Subtheme selbst erstellen mit drush dxt:subtheme:create. Sie prüfen das Ergebnis auf der Site.</p>'
        -
          '@type': Question
          name: 'Welche Drupal-Versionen unterstützt ein DXPR-Theme-Subtheme?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>Dieselben wie DXPR Theme 8.2: Drupal 10.3 und neuer, und Drupal 11. Die Info-Datei des Starterkits deklariert auch ältere Versionen, aber DXPR Theme 8.2 hängt von Modulen ab, die Drupal 10.3 brauchen.</p>'
        -
          '@type': Question
          name: 'Überschreibt das Aktualisieren von DXPR Theme mein Subtheme?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>Nein. Composer ersetzt nur themes/contrib/dxpr_theme; Ihr Subtheme liegt in themes/custom. Speichern Sie das Einstellungsformular des Subthemes nach einem Update einmal, sodass sein Stylesheet neue Variablen aufnimmt.</p>'
    -
      '@type': TechArticle
      headline: 'Ein DXPR-Theme-Subtheme erstellen (Drupal 11)'
      description: 'DXPR Theme ändert Farben, Schriften, Header, Abstände und Layout über sein Einstellungs-Dashboard, sodass die meisten Sites keine Zeile CSS brauchen. Ein Subtheme ist für den Rest: Ihr eigenes Stylesheet, Template-Overrides, zusätzliche Libraries oder eine Farbpalette, die Sie mit dem Code ausliefern. Das Subtheme erbt jedes Stylesheet und Template von DXPR Theme, erhält eigene Einstellungen, und Updates von DXPR Theme lassen es unangetastet.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:30:36+0000'
      dateModified: '2026-10-24T08:30:36+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/de/hc/dokumentation/dxpr-theme-lernen/sub-theme-erstellen/dxpr-theme-subtheme-erstellen'
      articleSection: 'Sub-Theme erstellen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-theme-lernen/sub-theme-erstellen/dxpr-theme-subtheme-erstellen'
      description: 'DXPR Theme ändert Farben, Schriften, Header, Abstände und Layout über sein Einstellungs-Dashboard, sodass die meisten Sites keine Zeile CSS brauchen. Ein Subtheme ist für den Rest: Ihr eigenes Stylesheet, Template-Overrides, zusätzliche Libraries oder eine Farbpalette, die Sie mit dem Code ausliefern. Das Subtheme erbt jedes Stylesheet und Template von DXPR Theme, erhält eigene Einstellungen, und Updates von DXPR Theme lassen es unangetastet.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Startseite
            item: 'https://dxpr.com/de'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: de
---
[Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Theme lernen](/de/hc/documentation/learn-dxpr-theme) /[Sub-Theme erstellen](/de/hc/documentation/learn-dxpr-theme/creating-sub-theme) # Ein DXPR-Theme-Subtheme erstellen (Drupal 11).

 DXPR Theme lernenSub-Theme erstellen

   ## In diesem Leitfaden

DXPR Theme ändert Farben, Schriften, Header, Abstände und Layout über sein Einstellungs-Dashboard, sodass die meisten Sites keine Zeile CSS brauchen. Ein Subtheme ist für den Rest: Ihr eigenes Stylesheet, Template-Overrides, zusätzliche Libraries oder eine Farbpalette, die Sie mit dem Code ausliefern. Das Subtheme erbt jedes Stylesheet und Template von DXPR Theme, erhält eigene Einstellungen, und Updates von DXPR Theme lassen es unangetastet.

Diese Anleitung gilt für DXPR Theme 8.2 auf Drupal 10.3 und Drupal 11. Das verwendete Starterkit liegt im Theme unter `dxpr_theme/dxpr_theme_STARTERKIT`; Drupal Cores `generate-theme`-Befehl wird nicht verwendet, denn DXPR Theme bringt ein eigenes Starterkit und einen eigenen Befehl mit.

## Bevor Sie beginnen

Fügen Sie DXPR Theme hinzu und aktivieren Sie sein Helper-Modul, das das Theme braucht, bevor Drupal es installiert:

```
composer require drupal/dxpr_theme
drush en dxpr_theme_helper
```

## 1. Das Subtheme aus dem Starterkit erzeugen

Am schnellsten geht es mit dem Drush-Befehl, den DXPR Theme Helper bereitstellt. Führen Sie ihn im Projekt-Stammverzeichnis aus; er prüft den Systemnamen, kopiert das Starterkit nach `themes/custom` und benennt alles für Sie um:

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

Ohne Argumente fragt der Befehl beide Namen ab. Ohne Drush nutzen Sie das Skript, das mit dem Theme kommt: Wechseln Sie nach `web/themes/contrib/dxpr_theme`, machen Sie die Skripte einmal ausführbar mit `chmod +x scripts/*`, führen Sie `./scripts/create_subtheme.sh` aus und geben Sie auf Nachfrage den lesbaren Namen und den Systemnamen ein. Das Skript läuft nur aus diesem Ordner.

So oder so erhalten Sie `web/themes/custom/northwind_theme`, mit den Dateien und der Konfiguration des Starterkits, umbenannt auf Ihren Systemnamen, und dem `THEMETITLE`-Platzhalter, ersetzt in den Info- und Schema-Dateien.

## 2. Aktivieren und die Einstellungen einmal speichern

1. Gehen Sie zu *Darstellung* und wählen Sie *Installieren und als Standard festlegen* für Ihr Subtheme.
2. Öffnen Sie die *Einstellungen* des Subthemes und drücken Sie *Konfiguration speichern*, ohne etwas zu ändern.

Dieses erste Speichern erzeugt das Einstellungs-Stylesheet für das neue Theme. Das Subtheme startet mit den Standardeinstellungen des Starterkits, nicht mit den Einstellungen, die Sie in DXPR Theme vorgenommen haben. Um diese zu übernehmen, exportieren Sie sie aus DXPR Theme und importieren sie in das Subtheme:

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

Von da an arbeitet das Dashboard genau wie bei DXPR Theme: Farben, Typografie, Header, Footer und Abstände gehören alle zum Subtheme.

Halten Sie die Regionen des Subthemes identisch mit denen des Basis-Themes. Das Starterkit deklariert dieselben vierzehn Regionen wie DXPR Theme, und die Option *Hide regions* von DXPR Theme Helper für Inhalte bezieht sich namentlich auf sie.

## 3. Was das Starterkit mitbringt

- `northwind_theme.info.yml`: `base theme: dxpr_theme`, die Regionen und eine Library, `global-styling`, die Ihr Stylesheet lädt. Ein auskommentierter `libraries-override`-Block listet die DXPR-Theme-Libraries, die Sie am ehesten abschalten, von `dxpr_theme/bootstrap-5` bis `dxpr_theme/helper-classes`.
- `css/dxpr_theme_subtheme.css`: wird auf jeder Seite nach den eigenen Stylesheets des Themes geladen. Ihr CSS gehört hierher.
- `templates/`: leer bis auf eine README. Kopieren Sie ein beliebiges Template aus `dxpr_theme/templates`, um es zu überschreiben.
- `config/install` und `config/schema`: die Standardeinstellungen und ihr Schema, umbenannt auf Ihr Theme.
- `color-settings.json`: Ihre eigenen benannten Farbpaletten, gezeigt in der Farbschema-Liste neben den eingebauten.
- `logo.svg`, `favicon.ico`, `screenshot.png`: ersetzen Sie sie durch Ihre.

## 4. CSS schreiben, das den Einstellungen folgt

DXPR Theme schreibt seine Einstellungen in CSS-Variablen: `--dxt-color-*` für die Palette und `--dxt-setting-*` für Typografie, Abstände und Layout und ordnet sie den `--bs-*`-Variablen von Bootstrap zu. Nutzen Sie die Variablen in Ihrem Stylesheet statt fester Werte, und Ihr CSS folgt weiter dem Dashboard, wenn jemand eine Farbe oder Schrift ändert.

```
/* 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);
}
```

Grundfarbe, Akzentfarben, Text, Überschriften, Links, Cards und Footer haben alle eine Variable. Die vollständige Liste steht in der README des Themes unter *CSS Custom Properties (Variables) Reference*.

## 5. Templates und Libraries überschreiben

Kopieren Sie das Template, das Sie ändern möchten, aus `themes/contrib/dxpr_theme/templates` in den `templates`-Ordner Ihres Subthemes, behalten Sie den Dateinamen, bearbeiten Sie es und leeren Sie die Caches. Drupal nimmt zuerst die Kopie des Subthemes.

Um ein Stylesheet oder Skript des Basis-Themes abzulegen, entkommentieren Sie die `libraries-override:`-Zeile in Ihrer Info-Datei zusammen mit den Zeilen der Libraries, die Sie entfernen möchten; sie stehen bereits auf `false`. Um eigene hinzuzufügen, deklarieren Sie weitere Libraries in `northwind_theme.libraries.yml` und listen Sie sie unter `libraries` in der Info-Datei, so wie das Starterkit es tut für `global-styling`.

## 6. Geben Sie der Redaktion Ihre Klassen in DXPR Builder

Klassen, deklariert unter `dxpr_builder_classes:` in der Info-Datei des Subthemes erscheinen im Klassenauswähler von DXPR Builder, sodass die Redaktion Ihr dunkles Band oder Glaspanel anwendet, ohne einen Klassennamen zu tippen. Gestalten Sie die Klasse in `dxpr_theme_subtheme.css`, begrenzt auf die DXPR-Builder-Elemente, für die sie gedacht ist.

## 7. Eine Farbpalette mit dem Theme ausliefern

Fügen Sie im Subtheme-Stammverzeichnis benannte Schemata zu `color-settings.json` hinzu. Jedes Schema setzt dieselben Schlüssel, die das Dashboard nutzt: `base`, `basetext`, `link`, `accent1`, `accent2`, `text`, `headings`, `card`, `footer`, `header`, `pagetitle` und den Rest. Das Schema erscheint in der Farbschema-Liste des Einstellungsformulars, sodass eine Site mit einem Klick zur Markenpalette wechseln kann.

## 8. DXPR Theme später aktualisieren

1. Aktualisieren Sie das Basis-Theme mit Composer: `composer update drupal/dxpr_theme --with-dependencies`.
2. Führen Sie Datenbank-Updates aus und leeren Sie die Caches.
3. Öffnen Sie das Einstellungsformular des Subthemes und speichern Sie es erneut, sodass das Einstellungs-Stylesheet mit allen neuen Variablen neu erzeugt wird.
4. Lesen Sie die Release Notes zu Template- oder Regionsänderungen und vergleichen Sie jedes Template, das Sie überschrieben haben, mit der neuen Version.

## Lassen Sie Ihren KI-Agenten das Theming übernehmen

DXPR Theme 8.1.1 und neuer liefern einen Agent-Skill. Führen Sie `drush dxt:setup-ai` in Ihrem Projekt aus, und Ihr Coding-Agent (Claude Code, Codex, Gemini CLI oder Cursor) lernt die Theme-Einstellungen und ihre Bedeutung. Beschreiben Sie die Marke, und der Agent setzt Farben, Typografie, Header-Layout und Abstände über dieselben Einstellungen, die das Dashboard schreibt, damit Sie sie auf der Site prüfen. Er kann das Subtheme auch erstellen mit `drush dxt:subtheme:create`.

Der DXPR-Builder-Skill leistet dasselbe für Seiten, und Drush Webmaster für Inhalte und Ansichten. [Die Agent-Skills in Aktion sehen](/drupal-agent-skills).

## Fragen zu DXPR-Theme-Subthemes

### Brauche ich ein Subtheme, um Farben und Schriften zu ändern?

Nein. Farben, Schriften, Header, Footer, Abstände und Layout sind Einstellungen im DXPR-Theme-Dashboard. Ein Subtheme braucht es nur für eigenes CSS, Template-Overrides, zusätzliche Libraries oder eine Palette, die Sie mit dem Code ausliefern.

### Kann ein KI-Agent das Subtheme und seine Einstellungen einrichten?

Ja. Nach `drush dxt:setup-ai` kennt der Agent die Theme-Einstellungen und ändert sie aus einem Briefing, und er kann das Subtheme selbst erstellen mit `drush dxt:subtheme:create`. Sie prüfen das Ergebnis auf der Site.

### Welche Drupal-Versionen unterstützt ein DXPR-Theme-Subtheme?

Dieselben wie DXPR Theme 8.2: Drupal 10.3 und neuer, und Drupal 11. Die Info-Datei des Starterkits deklariert auch ältere Versionen, aber DXPR Theme 8.2 hängt von Modulen ab, die Drupal 10.3 brauchen.

### Überschreibt das Aktualisieren von DXPR Theme mein Subtheme?

Nein. Composer ersetzt nur `themes/contrib/dxpr_theme`; Ihr Subtheme liegt in `themes/custom`. Speichern Sie das Einstellungsformular des Subthemes nach einem Update einmal, sodass sein Stylesheet neue Variablen aufnimmt.