DbGate の新しいテーマシステム
Published: 2026-01-23
ここ数年、DbGate は同じテーマシステムを維持してきました。バージョン 7.0.0 で、JSON ファイルに基づくまったく新しいテーマシステムを導入しました。残念ながら、プラグインとして実装されていた旧来のカスタムテーマは、もはやサポートされません。
DbGate コミュニティのメンバーが DbGate のためにテーマを作成してくださったことに深く感謝していますし、これまでに作成されたテーマが今後サポートされなくなることを心苦しく思っています。この決定を長い間先延ばしにしてきたのはそのためです。しかし時間が経つにつれ、デザインを進化させられないことが、次第に持続不可能になっていきました。最終的に、抜本的な変更を行い、テーマシステムを完全に作り直す決断をしました。
この記事では、この変更を行った理由と、新しいテーマシステムの仕組みについて説明します。
バージョン 6.x までの DbGate における凍結されたテーマシステム
バージョン 6.x までの DbGate には、比較的シンプルなテーマシステムがありました。少数の CSS 変数を使って色を定義していました。これらの CSS 変数は特定の UI 要素に結びついておらず、より汎用的なものでした（--font-color-1、--font-color-2、--background-color-1、--background-color-2 など）。この仕組みにより新しいテーマを簡単に作成できましたが、かなり制限もありました。特定の UI 要素ごとに独立してスタイルを定義することができなかったのです。また、このシステムはアプリケーションのデザインを事実上凍結してしまっていました。というのも、色の CSS 変数を変更すると、特定の部分ではなくアプリケーション全体に影響してしまうからです。
DbGate 7.0.0 における要素ベースのテーマ設定
DbGate 7.0.0 では、JSON ファイルに基づくまったく新しいテーマシステムを導入しました。この新しいシステムでは、各 UI 要素がそれぞれ独自の CSS 変数セットを持ち、色、ボーダー、その他のスタイルプロパティを定義します。これにより、テーマ定義の柔軟性が大幅に向上しました。テーマは、特定の UI 要素に関連付けられた、はるかに多くの CSS 変数によって定義されます（--data-browser-font-color、--data-browser-background-color、--button-font-color、--button-background-color など）。
AI 生成コンテンツの時代において、AI を使ってカスタムテーマを簡単に作成できるようにしたいと考えました。そのためには、アプリケーションの見た目をより細かく制御できることが必要でした。さらに、AI がこの作業を扱えるようになったことで、多数の CSS 変数を維持するコストは事実上無視できるレベルになり、その一方でデザイン面で得られる柔軟性のメリットは非常に大きくなりました。
AI によるテーマ生成
DbGate Premium エディションには、新しい「Theme AI アシスタント」機能が含まれています。この機能により、ユーザーは AI を使ってカスタムテーマを作成できます。望むテーマを自然言語で説明するだけで、AI アシスタントがその説明に基づいてテーマを生成します。生成されたテーマは、変更したい内容を文章で伝えるだけで、さらに修正することもできます。
DbGate Cloud を通じたテーマ共有
カスタムテーマの共有をサポートするために、DbGate Public ナレッジベースを拡張しました。テーマを作成するには、単に JSON ファイル内で CSS 変数を定義するだけです。Solarized light テーマのソースコードからインスピレーションを得ることもできます。最初のバージョンのテーマ作成には、AI アシスタントを活用することをおすすめします。 公開するには、DbGate Public knowledge base リポジトリにプルリクエストを作成するだけです。マージされると、あなたのテーマはすべての DbGate ユーザーにテーマセレクターから利用可能になり（テーマ内の色に基づくプレビュー付きで）ます。