Ein DXPR-Theme-Subtheme erstellen (Drupal 11).

Learn DXPR ThemeEen subthema maken

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.

Fragen zu DXPR-Theme-Subthemes

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.

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.

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.

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.