カスタムテーマ Liquid Glass Theme を作ってみた

しばらくテーマ Byte を使用していたけど、そろそろ気分転換を兼ねてテーマを変更することにした。Drupal サイトにも多くのテーマはあるけれど、Bootstrap を親テーマにしたサブテーマにすると、自分の技術力では独自性を表現することは難しく、どうしても Bootstrap 的な外観になってしまう。

そこで今回は、Starterkitコアテーマ をもとに、親テーマに依存しないカスタムテーマとして作成することにした。最初はテーマ  Prototype をもとにサブテーマを作ろうかと思ったけれど、Stable 9 に依存していることが分かったから却下した。

ただ、独自カスタムテーマの場合は Drupal Core の更新で何らかの修正があってもカスタムテーマには反映されないので、メンテナンスは自己責任になる。でも結局、サブテーマであっても親テーマの更新には注意が必要なので、やることは（多くなっても）基本的に同じ。であれば、Bootstrap にこだわらなくてもいいか、という感じで独自のカスタムテーマにしてみた。

とはいえ、自分で最初からテーマを作るとなると完成までどれだけ日数がかかるか検討もつかない。

そこで活用したのが生成 AI の ChatGPT。ローカル LLM の Qwen3.8 27B でも時間をかければ何とかなったかもしれないけど、思考速度では到底叶わないから有償の ChatGPT Plus（月額約3,000円：$20）を利用した。

Drupal のカスタムテーマを作りたいと思います。

外観は Liquid Glass っぽいデザインにしてください。

サブテーマではなく、Starterkit を元に、独自のカスタムテーマとしてください。

これくらいのプロンプトから始めて、少しずつ会話を重ねてこのサイトのテーマが完成した。なんだかんだで 5 時間リセットの利用量が 2 回分で、約 10 時間と GitHub での公開まで終わっている。慣れたらもっと短い時間で開発できるだろう。

あらかじめ theme/custom/liquidglass_theme を用意して、配置した AGENTS.md は次の内容で作業を開始した。これも、ChatGPT との会話で準備したもの。

# LiquidGlass Theme の開発指示

- 回答は基本的に日本語で記述してください。
- このディレクトリの機械名は `liquidglass_theme`、表示名は `LiquidGlass Theme` です。
- Drupal Core Starterkit 11.4.9 から生成した独立テーマです。`base theme: false` を維持し、Prototype・Stable 9・Jisaba Theme を親テーマや実行時依存にしないでください。
- Liquid Glass の透過、ぼかし、奥行き、余白を生かし、Bootstrap らしい外観を避けてください。
- Single Directory Components (SDC) を優先し、コンポーネント固有の Twig・CSS・JavaScript は各 SDC 内に配置してください。
- Canvas 用コンポーネントの props / slots schema を適切に定義してください。公開済みの ID・props・slots を変更する場合は、既存のページとテンプレートの移行方法を確認してください。
- 明暗モードは訪問者の OS 設定を初期値とし、コンパクトな切り替え UI で明示的にも変更できるようにしてください。
- 配色、メディア背景画像、透過、ぼかし、奥行き、ブロック間・左右の余白はテーマ設定から管理できるようにしてください。
- 変更は原則としてこのディレクトリ内で行ってください。Core、contrib、vendor は参照のみとし、直接修正しないでください。
- データベースを SQL で直接変更しないでください。設定やコンテンツの移行は Drupal API を使用し、実行する Drush コマンドと影響を事前に提示してください。
- Core・Canvas の更新時には、標準テンプレートとの差分、匿名／ログイン時の表示、フォーム、明暗モード、Canvas の編集・公開とデータ診断を確認してください。

あとは良い感じにカスタムテーマを作ってくれるから、細かな指示を何度か与えれば完成。特に Canvas で編集することを優先しているから、実際に修正の様子を見ながら開発を進めた。

公開した GitHub リポジトリは https://github.com/NBE03xxx/LiquidGlassTheme 。

参考です。作業が終わってから技術的ポイントを ChatGPT にまとめてもらった結果がこちら。

Drupal のカスタムテーマ「LiquidGlass Theme」を作る――SDC と Canvas を軸にした設計

Drupal サイトのテーマ制作がひと区切りつきました。Prototype を出発点に進めてきた開発は、最終的に Core Starterkit を基礎とする独立テーマ「LiquidGlass Theme」にまとまりました。Bootstrap らしい外観を避け、透過・ぼかし・余白を生かしたデザインと、Canvas で編集できる構成を目指しました。

テーマの機械名は `liquidglass_theme`。`.info.yml` に `base theme: false` を指定し、Prototype や Stable 9 を親テーマとして必要としない構成にしています。従来のテーマで作成したコンポーネントやビルド環境を引き継ぎながら、標準テンプレートの基礎を Core Starterkit に揃えました。

部品の実装には、Drupal の Single Directory Components（SDC）を採用しました。記事カード、本文、Hero、ナビゲーションなどの Twig・CSS・JavaScript を各コンポーネントにまとめ、`.component.yml` で入力値の `props` と、内側に配置するコンテンツの `slots` を定義しています。表示と設定項目を一緒に管理でき、Canvas からも同じ部品を利用できます。

Canvas との連携で注意したのは、公開済みデータとの互換性です。コンポーネントの定義は、保存済みのページやテンプレートにも関係します。例えば記事カードへの投稿日時の追加は、整数型の任意 prop とし、日時を持たない既存の配置でも表示が成立するようにしました。見た目の改善と、保存済みデータの扱いをセットで考える必要がありました。

ヘッダーとフッターは、Canvas の共通パターンを参照して描画する方式にしました。各ページに構成を複製せず、共通パターンの公開内容を利用するため、一か所の更新を参照先へ反映できます。実装ではパターンのキャッシュタグを付け、編集プレビューでは検証済みの下書きを参照します。再帰参照の防止に加え、参照先の部品へページ側の編集用属性を出力しないことで、Canvas の選択対象とデータ構造の整合性も保っています。

Liquid Glass の表現は、CSS カスタムプロパティを中心に組み立てました。配色、透過率、ぼかし、奥行き、左右余白、ブロック間隔をテーマ設定から受け取り、各部品で共通の値を使います。半透明の背景には `color-mix()`、背景のぼかしには `backdrop-filter` を使用し、対応状況は `@supports` で判定しています。また、設定や背景のメディア・ファイルへのキャッシュ依存関係も付け、変更時に HTML のキャッシュが無効になるようにしました。

明暗モードは OS の `prefers-color-scheme` を初期値にし、利用者が「自動・ライト・ダーク」を切り替えられるようにしました。明示的な選択は `localStorage` に保存し、OS 設定の変化や別タブでの切り替えにも追従します。JavaScript は `Drupal.behaviors` と `once` を使い、Drupal の再描画時にもイベントを重複登録しない構成です。本文やコードブロックも共通の配色に合わせ、長いコードは横スクロールで読めるようにしています。

操作性の細部も調整しました。記事カードは通常のリンクを残し、CSS の疑似要素でクリック領域をカード全体へ広げています。これにより、キーボード操作や Ctrl／中クリックによる別タブ表示を維持できます。ログイン／ログアウトのメニューも Drupal 標準のブロックを利用し、アクセス制御、キャッシュ情報、ログアウト用トークンを引き継いでいます。

配布にはビルド済みの CSS・JavaScript を含め、テーマを使うだけなら Node.js が不要な形にしました。一方、サイト固有の本文・画像・Canvas の構成データは公開ソースから分離しています。保守用には明暗モードのテストと Canvas のデータ診断スクリプトを用意しました。今後の Core 更新では Starterkit 由来のテンプレートとの差分を、コンポーネント変更では保存済みデータとの互換性を確認していきます。