#D34 Colour Generator Problem

カラージェネレーターの不具合

カラージェネレーターはCivicThemeのテーマ設定にて、サイトのカラーやテキストカラーなどをCSSのコードに触れず、GUI上のカラーパレットで好みの色を選択することで、サイトのカラーの設定が簡単に出来る機能です。このカラージェネレーターの機能がDrupal 10.4.0に更新以降効かなくなっています。

カラージェネレーターが効かないので、公開サイトの配色はCivic Themeが配布時に設定しているデフォルトカラーとなってしまいます。

Drupal 10.4.0にアップデートした時に出た不具合の記事

https://drupal.hooked-on01.com/ja/drupal/learn-part030

しばらくこの状態でしたが、パラグラフモジュールの更新通知が来ていたので、Drupal公式サイトを確認し久しぶりにCivic Themeの更新状況の確認をします。

Drupal 10.4.0以降、Civic Themeの安定版は1.9.0から1.8.2に戻されていましたが、1.9.0が安定版になっています。バグフィックスを確認すると、カラージェネレーターの不具合の修正パッチが配布されています。内容は応急的な対処ですが、不具合には対応しているので早速試してみます。

公式サイトより

問題点の説明

https://www.drupal.org/project/civictheme/issues/3503929(Opens in a new tab/window)

Root Cause

The CSS assets were loaded in the wrong order after the Drupal 10.4 update, causing the custom variables to be overridden by the default theme variables.

Fix Implemented

To correct the CSS asset loading order, weights were added to the variable file in civictheme.libraries.yml and _civictheme_library_info_alter__color_selector().

The fix has been implemented, and a PR has been raised: GitHub PR #1327

簡単な翻訳

原因

Drupal 10.4の更新後、CSSアセットが間違った順序でロードされたため、カスタム変数がデフォルトのテーマ変数によって上書きされました。

修正点

CSSアセットの読み込み順序を修正するために、civictheme.libraries.ymlと_civictheme_library_info_alter__color_selector()の変数ファイルにウエイトが追加されました。

修正が実装され、PRが提起されました：GitHub PR #1327

https://github.com/civictheme/monorepo-drupal/pull/1327(Opens in a new tab/window)

https://github.com/civictheme/monorepo-drupal/pull/1327/files(Opens in a new tab/window)

実際の例

下記カラージェネレーター画面で設定した配色が公開するページで反映されない問題です。

カラージェネレーターの設定画面

設定が反映されない例

上記カラージェネレーターでトップナビゲーションをライムグリーンにしていますが、公開ページはデフォルトのライトグレーのままになっています。

カラージェネレーターで変更した配色が変更されません。

今回の修正を行う事でカラージェネレーターの変更した配色が反映されます。

設定が反映された例

今回公開された修正パッチを適用する事でカラージェネレーターで設定した公開ページのトップナビゲーションのライムグリーンが反映されています。

以下のアコーディオンメニューに修正方法をまとめています。

[civictheme.libraries.yml] と [libraries.inc]
にウエイトを指定し、CSSの読み込みの順序を変更します。

[1]web/themes/contrib/civictheme/civictheme.libraries.yml
// 15行目にweight: 10を追加
-----
css-variables:
  css:
    theme:
      dist/civictheme.variables.css: {preprocess: false} // [修正前]
      dist/civictheme.variables.css: {preprocess: false, weight: 10 } // [修正後]
layouts:
  css:
-----

[2]web/themes/contrib/civictheme/includes/libraries.inc
// 76行目に 'weight' => 10,を追加
-----
       $libraries['css-variables']['css']['theme'] = [
          $stylesheet_path => [
            'preprocess' => FALSE,
            'weight' => 10, // [追加]
          ],
        ];
      }
-----

修正方法の補足

web/themes/contrib/civictheme/civictheme.libraries.yml

と

web/themes/contrib/civictheme/includes/libraries.inc

のpreprocess: false, にweight: 10を追加することでCSSアセットが間違った順序でロードされ、カスタム変数がデフォルトのテーマ変数によって上書きされる問題が解決されます。

この修正により、カラージェネレーターの変更が公開サイトに適用され、デフォルトの配色から指定した配色が反映されます。当サイトもこの修正を行なったので、カラージェネレーターで設定した配色が反映されています。

サブテーマの問題も解決

今回の修正によりDrupal 10.4.0にアップデートした際、サブテーマのファビコンがCivicThemeのデフォルトになってしまい変更されない不具合も修正されていたので、応急処置的にメインテーマをデフォルトとして公開していたサイトを元のサブテーマをデフォルトに戻して公開しました。

公式アナウンスの理解

昨年12月にDrupal10.3.x >>> Drupal10.4.0にアップデートした際に出た不具合で、しばらく修正パッチがなかったのですが、久しぶりにDrupalの公式サイトを見たら、問題の報告と修正パッチが公開されていたので早速修正を行いました。

Civic Themeの難しさに、不具合対応がパッチによる修正のケースがあるため、パッチを当てるか設定ファイルに直接書き込む必要があります。修正自体は軽微な修正でチュートリアルを良く読めば誰でも出来るのですが、全て英文で、実際の修正点を探し出したりするのは、初学者にとって敷居が高いかもしれません。

公式サイトの情報を定期的に確認する必要性を再確認した出来事でした。機会があれば公式サイトの見方などを簡単に説明する記事を書いてみるのも良いのではないかと考えています。

Drupalの記事

関連するDrupalでWEBサイトを構築する為の環境構築の記事やDrupalについて書いた記事になります。

記事は全てナンバリングしています。Drupalを初めて使う為の準備から始まる最初の記事から読む事もできます。

最初の記事から購読

最新の記事

Drupalについて書いた最新の記事になります。

Life Styleの記事

Drupalとは関係ないのですがLife Styleの記事も書いていますのでよろしければ購読ください。

2025/03/07(金) - 12:00

Hooked-on Drupal.

For non-Japanese speakers

公式サイトより

公式アナウンスの理解