2.7.0.beta5 でカラーパレットが正しく読み込まれない

貢献 バグ
1

今朝 2.7.0.beta5 にアップデートしたところ、多くの色が変わってしまいました。カラーパレットが正しく読み込まれておらず、代わりに「新しいパレット」をクリックしたときに表示されるデフォルトのカラーパレットが適用されているようです。以下の 2 つのテーマは異なるカラーパレットを使用していますが、どちらも Discourse の「新しいカラーパレット」→ 1 行目の CSS で定義されている「ベースパレット：Light」に統一されてしまいます。

例 1:
これがテーマのカラーパレットです:

image
image688×649 24.9 KB

CSS の最初の行は以下の通りです:

$primary: #222222 !default; $secondary: #ffffff !default; $tertiary: #0088cc !default; $quaternary: #e45735 !default; $header_background: #ffffff !default; $header_primary: #333333 !default; $highlight: #ffff4d !default; $danger: #e45735 !default; $success: #009900 !default; $love: #fa6c8d !default;

例 2:
これがテーマのカラーパレットです:

image
image384×512 85.6 KB

CSS の最初の行は以下の通りです:

$primary: #222222 !default; $secondary: #ffffff !default; $tertiary: #0088cc !default; $quaternary: #e45735 !default; $header_background: #ffffff !default; $header_primary: #333333 !default; $highlight: #ffff4d !default; $danger: #e45735 !default; $success: #009900 !default; $love: #fa6c8d !default;

空の新しいテーマから始めてパレットを追加すれば、期待通りに動作しますが、既存のテーマでは、割り当てられたパレットの代わりにデフォルトの「Light」パレットが読み込まれてしまいます。

「いいね！」 1
2

現時点で、これを回避できる唯一の方法は、各テーマとコンポーネントに手動で必要なSassのカラー変数を追加することです。

「いいね！」 1
4

この問題は再現できませんでした。既存のテーマの色パレットを変更した場合、依然として正しくない状態のままですか？

「いいね！」 3
5

同じ問題が発生しているようです。2.7.0.beta5 (6c57f6f49d) に更新したところ、テーマコンポーネントでカラー schemes が適用されなくなりました。

当方では以下を使用しています：

#meta-links {
    background-color: $header_background;
}

しかし、背景色がカラー schemes で定義された色ではなく #fff になっていました。

以下の試みを行いましたが、効果はありませんでした：

  • カラー schemes のテーマへの再割り当て
  • カラー schemes のコピーを作成し、それをテーマに割り当て
  • テーマコンポーネントのテーマへの再割り当て

現在の回避策は、CSS で色を手動で設定することです。

「いいね！」 2
6

発生している事象は、ベーステーマの正しいパレットが読み込まれるものの、コンポーネントに対しては読み込まれていないようです。そのため、コンポーネントを使用していないページの部分は正しい色が表示されますが、コンポーネントに依存する部分は、テーマに割り当てられたパレットではなく、デフォルトの Discourse「Light」パレットが読み込まれてしまいます。

開発者ツールから
color_definitions.scss には正しいパレットが含まれています

image
image973×118 12.9 KB

desktop.scss にも正しいパレットが含まれています
image

コンポーネントである theme_174.scss は、デフォルトの Light パレットを使用しています
image

theme_171 はコンポーネントですが、common.css には以下の CSS の行のみが含まれており、他には何もありません

#banner {
    margin: auto 20px;
    background-color: $primary-low;
    max-width: 880px;
    border: 1px solid #999 ;
}
「いいね！」 2
7

@gkln さん、@smrtey さん、追加の詳細をありがとうございます。試してみたいことがあります：コンポーネントを一つずつ無効化して、何か変化があるか確認してみてください。どこかで検出されていないサイレントエラーが存在し、それがコンポーネントの CSS を壊している可能性があります。

8

SCSS カラー変数を使用するコンポーネントであれば、この問題が発生するようです。各コンポーネントに手動で色を追加すれば、すべて正常に動作します：

$primary: #22262a !important; $secondary: #fefefe !important; $tertiary: #2572e4 !important; $quaternary: #518ee9 !important; $header_background: #1550a7 !important; $header_primary: #fcfcfc !important; $highlight: #9edaf5 !important; $danger: #ff7114 !important; $success: #85cc54 !important; $love: #de0100 !important;

しかし、これは理想的な解決策とは程遠いです。この問題のトラブルシューティング方法がわかりません。Discourse が異なるカラーパレットを読み込む原因を特定できる余地は全くありません。

「いいね！」 1
12

OK、@pmusaraj が詳しく調査してバグを発見しました。こちらで修正されています：

したがって、サイトを再度更新すれば問題が解決するはずです。

これらがあなたが作成したテーマコンポーネントである場合、SCSS 変数の代わりに CSS カスタムプロパティを使用するように更新することを推奨します。この切り替えにより、自動ダークモードを利用できるようになり、色のオーバーライドも容易になります。詳細はこちらをご覧ください：

「いいね！」 6