カラージェネレーターの不具合
カラージェネレーターは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
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
https://github.com/civictheme/monorepo-drupal/pull/1327/files
実際の例
下記カラージェネレーター画面で設定した配色が公開するページで反映されない問題です。
カラージェネレーターの設定画面
設定が反映されない例
上記カラージェネレーターでトップナビゲーションをライムグリーンにしていますが、公開ページはデフォルトのライトグレーのままになっています。
カラージェネレーターで変更した配色が変更されません。
今回の修正を行う事でカラージェネレーターの変更した配色が反映されます。
設定が反映された例
今回公開された修正パッチを適用する事でカラージェネレーターで設定した公開ページのトップナビゲーションのライムグリーンが反映されています。
トップナビゲーションのライムグリーンが反映されています。
以下のアコーディオンメニューに修正方法をまとめています。
-
修正パッチの変更箇所
[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
上記のcivictheme.libraries.ymlと
web/themes/contrib/civictheme/includes/libraries.inc
上記のlibraries.inc内記述のpreprocess: false, にweight: 10を追加することでCSSアセットが間違った順序でロードされ、カスタム変数がデフォルトのテーマ変数によって上書きされる問題が解決されます。
この修正により、カラージェネレーターの変更が公開サイトに適用され、デフォルトの配色から指定した配色が反映されます。当サイトもこの修正を行なったので、カラージェネレーターで設定した配色が反映されています。
サブテーマの問題も解決
今回の修正によりDrupal 10.4.0にアップデートした際、サブテーマのファビコンがCivicThemeのデフォルトになってしまい変更されない不具合も修正されていたので、応急処置的にメインテーマをデフォルトとして公開していたサイトを元のサブテーマをデフォルトに戻して公開しました。