lucr
(Luc)
1
しばらくの間、アイコンヘッダーに問題があります。ダークテーマではヘッダーアイコンが白く、ライトテーマではヘッダーアイコンが黒くなります。再度問題を解決しようとしましたが、いくつかのトピックを確認しました。
このトピック:Site header icons don't use header primary color では、Discourse がアイコンに $header_primary と $header_secondary を使用するように更新されたと述べられています。
しかし、カラーテーマを確認して色々試したところ、私のインスタンスにはその修正が適用されていないようです。このリンクされた投稿は2019年のもので、現在私は 3.4.0.beta1-dev を使用しています。
私が言っていることの例:
プライマリを赤に変更した場合:
何か洞察や提案があれば、大いに感謝いたします。
Firepup650
(Firepup Sixfifty)
3
「テーマなし」モードのセーフモードで問題は解消しますか?
「いいね!」 3
lucr
(Luc)
4
確認していませんでしたが、今確認したところ、そうすると消えました。テーマの問題だと思います。かなり古いものです。
「いいね!」 2
bryce
(Bryce Huhtala)
5
ブラウザの開発者ツールを使用すると、適用されているスタイルを確認することで、この問題の原因を突き止めることができます。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
lucr
(Luc)
6
この詳細な回答をありがとうございます!後で確認して、修正を試みます。
「いいね!」 1