DXPR Themeのサブテーマの作成.
DXPR Themeは色、フォント、ヘッダー、余白、レイアウトを設定ダッシュボードから変更できるため、ほとんどのサイトではCSSを1行も書く必要がありません。サブテーマはそれ以外の用途、すなわち独自のスタイルシート、テンプレートのオーバーライド、追加のライブラリ、コードと一緒に提供するカラーパレットのためのものです。サブテーマはDXPR Themeのすべてのスタイルシートとテンプレートを継承し、独自の設定を持ち、DXPR Themeの更新にも影響されません。
このガイドはDrupal 10.3およびDrupal 11上のDXPR Theme 8.2を対象とします。使用するスターターキットはテーマ内のdxpr_theme/dxpr_theme_STARTERKITに同梱されています。DXPR Themeは独自のスターターキットとコマンドを備えているため、Drupalコアのgenerate-themeコマンドは使いません。
始める前に
DXPR Themeを追加し、そのヘルパーモジュールを有効化します(Drupalがテーマをインストールする前に必要なモジュールです)。
composer require drupal/dxpr_theme
drush en dxpr_theme_helper1. スターターキットからサブテーマを生成する
最も速い方法は、DXPR Theme Helperが提供するDrushコマンドです。プロジェクトルートで実行すると、マシン名を検証し、スターターキットをthemes/customにコピーしてすべてリネームします。
drush dxt:subtheme:create northwind_theme --theme-name="Northwind Theme"引数なしでは、コマンドは2つの名前を尋ねます。Drushを使わない場合は、テーマに同梱のスクリプトを使います。web/themes/contrib/dxpr_themeに移動し、chmod +x scripts/*でスクリプトを実行可能にし(初回のみ)、./scripts/create_subtheme.shを実行して、求められたら人間可読名とマシン名を入力します。このスクリプトはそのフォルダーからのみ実行できます。
どちらの方法でもweb/themes/custom/northwind_themeができあがります。スターターキットのファイルと設定はマシン名にリネームされ、infoファイルとスキーマファイル内のTHEMETITLEプレースホルダーは置換されます。
2. 有効化して設定を1回保存する
- サブテーマを使うには、外観を開き、インストールしてデフォルトに設定を選択します。
- サブテーマの設定を開き、何も変更せずに設定を保存を押します。
最初の保存で、新しいテーマの設定スタイルシートが生成されます。サブテーマは、DXPR Themeで設定した内容ではなく、スターターキットのデフォルト設定から始まります。DXPR Themeの設定を引き継ぐには、DXPR Themeからエクスポートしてサブテーマにインポートします。
drush dxt:config:export --theme=dxpr_theme --file=theme.yml
drush dxt:config:import theme.yml --theme=northwind_themeこれ以降、ダッシュボードはDXPR Themeの場合とまったく同じように動作します。色、タイポグラフィ、ヘッダー、フッター、余白はすべてサブテーマのものになります。
サブテーマのリージョンはベーステーマと同一に保ちます。スターターキットはDXPR Themeと同じ14個のリージョンを宣言しており、コンテンツに対するDXPR Theme Helperのリージョンを非表示オプションは名前でそれらを参照します。
3. スターターキットの内容
northwind_theme.info.yml:base theme: dxpr_theme、リージョン、そしてスタイルシートを読み込む1つのライブラリglobal-stylingです。コメントアウトされたlibraries-overrideブロックには、無効化する可能性が高いDXPR Themeライブラリがdxpr_theme/bootstrap-5からdxpr_theme/helper-classesまで列挙されています。css/dxpr_theme_subtheme.css: テーマ自体のスタイルシートの後にすべてのページで読み込まれます。CSSはここに記述します。templates/: README以外は空です。オーバーライドしたいテンプレートをdxpr_theme/templatesからここにコピーします。config/installとconfig/schema: テーマ名にリネームされたデフォルト設定とそのスキーマです。color-settings.json: 独自の名前付きカラーパレットで、組み込みのものと並んでカラースキーム一覧に表示されます。logo.svg、favicon.ico、screenshot.png: 独自のものに置き換えます。
4. 設定に連動するCSSを書く
DXPR Themeは設定をCSS変数に書き出します。パレット用の--dxt-color-*、タイポグラフィ・余白・レイアウト用の--dxt-setting-*で、Bootstrapの--bs-*変数に対応付けられます。固定値の代わりにスタイルシートで変数を使うと、色やフォントが変更されてもCSSはダッシュボードに連動し続けます。
/* 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);
}ベースカラー、アクセントカラー、テキスト、見出し、リンク、カード、フッターにはすべて変数があります。全一覧はテーマのREADMEのCSS Custom Properties (Variables) Referenceにあります。
5. テンプレートとライブラリをオーバーライドする
変更したいテンプレートをthemes/contrib/dxpr_theme/templatesからサブテーマのtemplatesフォルダーにコピーし、ファイル名はそのままで編集して、キャッシュをクリアします。Drupalはサブテーマのコピーを優先します。
ベーステーマのスタイルシートやスクリプトを除外するには、infoファイル内のlibraries-override:行を、削除したいライブラリの行と一緒にコメント解除します(すでにfalseに設定されています)。独自のものを追加するには、northwind_theme.libraries.ymlでライブラリをさらに宣言し、スターターキットがglobal-stylingで行っているようにinfoファイル内のlibrariesの下に列挙します。
6. DXPR Builderで編集者にクラスを提供する
サブテーマのinfoファイル内でdxpr_builder_classes:の下に宣言したクラスはDXPR Builderのクラスピッカーに表示されるため、編集者はクラス名を入力せずにダークバンドやガラスパネルを適用できます。対象のDXPR Builderエレメントにスコープして、dxpr_theme_subtheme.cssでクラスにスタイルを付けます。
7. テーマにカラーパレットを同梱する
サブテーマのルートにあるcolor-settings.jsonに名前付きスキームを追加します。各スキームは、ダッシュボードと同じキー(base、basetext、link、accent1、accent2、text、headings、card、footer、header、pagetitleなど)を設定します。スキームは設定フォームのカラースキーム一覧に表示されるため、サイトはワンクリックでブランドパレットに切り替えられます。
8. 後でDXPR Themeを更新する
- Composerでベーステーマを更新します(
composer update drupal/dxpr_theme --with-dependencies)。 - データベース更新を実行し、キャッシュをクリアします。
- サブテーマの設定フォームを開いてもう一度保存し、新しい変数で設定スタイルシートを再生成します。
- テンプレートやリージョンの変更についてリリースノートを読み、オーバーライドしたテンプレートを新しいバージョンと比較します。
テーマ設定はAIエージェントに任せる
DXPR Theme 8.1.1以降にはエージェントスキルが同梱されています。プロジェクトでdrush dxt:setup-aiを実行すると、コーディングエージェント(Claude Code、Codex、Gemini CLI、Cursor)はテーマ設定とその意味を学習します。ブランドを説明すると、エージェントはダッシュボードと同じ設定項目を通じて色、タイポグラフィ、ヘッダーレイアウト、余白を設定するため、サイト上で結果を確認できます。drush dxt:subtheme:createでサブテーマの作成も可能です。
DXPR Builderスキルはページに対して同じことを行い、Drush WebmasterはコンテンツとViewsに対して行います。エージェントスキルの動作を見る。