.topic-body背景色延迟加载

[riteshsaini]

您好，

我正在使用深色背景和白色的 .topic-body 以获得对比度。

这是我正在使用的 CSS：

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

但是，每当网站重新加载时，首先会显示 HTML 背景颜色，然后才会加载 .topic-body 背景颜色。

这对用户体验很糟糕。

有什么方法可以优先加载 .topic-body 背景颜色吗？

或者有其他方法可以做到吗？

这是我想要并最终得到的结果：

[Don]

您必须覆盖 keyframes 或创建一个新的。
像这样可以更改动画过渡颜色。

默认的 keyframe 是

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

这意味着它从 var(--tertiary-low) 突出显示到 transparent。这很酷，因为 Discourse 的默认背景颜色是白色，而主题正文没有背景，所以透明就是白色，但在您的情况下，问题是背景不同，所以它首先变为透明，然后稍有延迟后变为 #fff (您为 topic-body 设置的背景颜色)。

---

所以您必须更改透明度以实现平滑的颜色过渡。您可以覆盖默认值，但也许创建一个新的 keyframes 会更好。

注意：如果您覆盖默认的 keyframe，它将改变 Discourse 使用它的所有地方，而不仅仅是 topic-body。

这将覆盖默认的 keyframes。

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

---

如果您想创建一个新的 keyframes

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

并将此 keyframe 添加到主题正文。

.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;
  }
}

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

---

之前

之后

[riteshsaini]

太棒了！\n\n谢谢你，@Don \n\n写出这么完善的解决方案一定花了不少时间。感谢你的帮助和支持。\n\n祝你一天/晚上愉快

[maiki]

嗨 @riteshsaini。

我已将此主题移至 Support，以便您可以将 @Don 的精彩回答标记为解决方案。