.topic-bodyの背景色が遅れて読み込まれる

[riteshsaini]

こんにちは。

コントラストのために、白い.topic-bodyでダークバックグラウンドを使用しています。

使用しているCSSは以下の通りです。

html {
    background-color: #F5F5F5;
}
.topic-body {
    background-color: #fff;
}

しかし、サイトがリロードされるたびに、まずHTMLのバックグラウンドカラーが表示され、その後.topic-bodyのバックグラウンドカラーが読み込まれます。

これはUXにとって悪いです。

.topic-bodyのバックグラウンドカラーを先に読み込むように優先させる方法はありますか？

または、他に方法はありますか？

これが最終的に欲しかった結果です。

[Don]

こんにちは。keyframes をオーバーライドするか、新しいものを作成する必要があります。
次のようなものでアニメーションの遷移色を変更できます。

デフォルトのキーフレームは です

@keyframes background-fade-highlight {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: transparent;
  }
}

これは var(--tertiary-low) から transparent へのハイライトを意味します。Discourse のデフォルトの背景色は白で、トピック本文には背景がないため、透明は白になりますが、あなたの状況では背景が異なるため、まず透明になり、少し遅れて #fff (トピック本文に設定した背景色) になります。

---

そのため、スムーズな色の遷移を実現するには、透明度を変更する必要があります。デフォルトをオーバーライドすることもできますが、新しいキーフレームを作成する方が良いかもしれません。

注: デフォルトのキーフレームをオーバーライドすると、トピック本文だけでなく、Discourse が使用しているすべての場所で変更されます。

これにより、デフォルトのキーフレームがオーバーライドされます。

@keyframes background-fade-highlight {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: #fff;
  }
}

---

新しいキーフレームを作成したい場合

// カスタムキーフレーム
@keyframes background-fade-highlight-custom {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: #fff;
  }
}

そして、このキーフレームをトピック本文に追加します。

.topic-body {
  background-color: #fff;
  &.highlighted {
    animation: background-fade-highlight-custom 2.5s ease-out;
  }
}

---

完全なコードは次のようになります。

body {
  background-color: #F5F5F5;
}

.topic-body {
  background-color: #fff;
  &.highlighted {
    animation: background-fade-highlight-custom 2.5s ease-out;
  }
}

// カスタムキーフレーム
@keyframes background-fade-highlight-custom {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: #fff;
  }
}

---

前

後

[riteshsaini]

完璧に動作します！

@Don さん、ありがとうございます。

この包括的なソリューションを作成するには、かなりの時間がかかったことでしょう。ご協力とサポートに感謝いたします。

素晴らしい一日/夜をお過ごしください

[maiki]

@riteshsaini 様。

このトピックを#supportに移動しましたので、@Donの素晴らしい回答を解決策としてマークすることができます。