discourse ヘッダーアイコンの色に関する問題

しばらくの間、アイコンヘッダーに問題があります。ダークテーマではヘッダーアイコンが白く、ライトテーマではヘッダーアイコンが黒くなります。再度問題を解決しようとしましたが、いくつかのトピックを確認しました。

このトピック:Site header icons don't use header primary color では、Discourse がアイコンに $header_primary$header_secondary を使用するように更新されたと述べられています。

しかし、カラーテーマを確認して色々試したところ、私のインスタンスにはその修正が適用されていないようです。このリンクされた投稿は2019年のもので、現在私は 3.4.0.beta1-dev を使用しています。

私が言っていることの例:


プライマリを赤に変更した場合:


何か洞察や提案があれば、大いに感謝いたします。

「テーマなし」モードのセーフモードで問題は解消しますか?

「いいね!」 3

確認していませんでしたが、今確認したところ、そうすると消えました。テーマの問題だと思います。かなり古いものです。

「いいね!」 2

ブラウザの開発者ツールを使用すると、適用されているスタイルを確認することで、この問題の原因を突き止めることができます。Chrome/Firefox の場合は、ヘッダーアイコンのいずれかを右クリックして「検証」を選択します。

要素に影響を与えているすべての CSS コードが表示されるスタイルペインを探します。アイコンの色自体は color プロパティによって制御されるはずです。あなたの場合は、background-color が「primary」に設定されている可能性もあります。

右側には、各 CSS スタイリングブロックのソースファイル名が表示されます。多くはコア Discourse (たとえば、スクリーンショットの「header.scss」) からのものです。「theme_6.scss」のような表示がある場合は、おそらくテーマまたは別の有効なテーマコンポーネントからのものです。ファイル名をクリックすると表示して、ファイル内のコードの位置を確認できます (または、ファイル名の右側にある行番号を参照してください)。

最後に、スタイルパネルでプロパティをオン/オフに切り替えて、プロパティを削除した場合の外観を確認できます (プロパティにカーソルを合わせるとチェックボックスが表示されます)。プロパティは優先度が高い順にリストされているため、通常は上にあるものが下にあるものをオーバーライドします。たとえば、スクリーンショットでは、「buttons.scss」の color: var(--primary-low-mid) がオーバーライドされていることがわかります (取り消し線が引かれていることで示されています)。

明白なものが見つからない場合は、要素タブで親要素を選択して、そこでスタイルを確認してみてください。この場合、SVG アイコンはリンク (<a>) 要素の中にあり、そのリンクはリスト項目 (<li>) 要素の中にあります。背景色は、それらのいずれかから来ている可能性があります。

テーマで問題の CSS コードを見つけたら、安全に削除してデフォルトの外観に戻すことができます!

「いいね!」 5

この詳細な回答をありがとうございます!後で確認して、修正を試みます。

「いいね!」 1