Hi, I’m using a dark background with white .topic-body for contrast. This is the CSS I’m using: html { background-color: #F5F5F5; } .topic-body { background-color: #fff; } But whenever the site is reloaded, first the HTML background-color shows up, then the .topic-body background color loads. It’s bad for UX. Is there any way to prioritize .topic-body background color to load first? Or is there any other way to do it? This is the final result I wanted and got: [6897e8f9-70a2-4469-9af0-45a5de0003ff]

Hello, You have to override the keyframes or create a new one. Something like this will change the animation transition colors. The default keyframe is :arrow_down_small: @keyframes background-fade-highlight { 0% { background-color: var(--tertiary-low); } 100% { background-color: transparent; } } This means it highlight from var(--tertiary-low) to transparent. Which is cool because Discourse default background color is white and topic body has no background, so transparent will be white but in your situation the problem is the background is different so it goes first to transparent and after a little delay it will be #fff (the background color you seted up to topic-body). So you have to change the transparent to make it smooth color transition. You can override the default but maybe better if you create a new keyframes. Note: If you override the default keyframe it will change everywhere where Discourse using it not just on topic-body. :arrow_down_small: This will override the default keyframes. @keyframes background-fade-highlight { 0% { background-color: var(--tertiary-low); } 100% { background-color: #fff; } } If you want to create a new keyframes :arrow_down_small: // Custom keyframes @keyframes background-fade-highlight-custom { 0% { background-color: var(--tertiary-low); } 100% { background-color: #fff; } } And add this keyframe to the topic body. .topic-body { background-color: #fff; &.highlighted { animation: background-fade-highlight-custom 2.5s ease-out; } } The full code looks something like this. :arrow_down_small: 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; } } Before After

It works perfectly! Thank you @Don It must have taken some time to write this thorough solution. I appreciate the help and support. Have a great day/evening :slight_smile:

.topic-body background color loads after a delay

Product Support

maiki (maiki) July 14, 2022, 6:14pm 4

Hi @riteshsaini.

I moved this topic to Support, so you can mark @Don’s great answer as the solution.

Topic		Replies	Views
Remove background color change after page loading Product Support	1	926	December 3, 2020
Different background color only on posts Product Support css	2	505	July 15, 2022
Highlighting of content Product Support	2	726	February 21, 2019
Fade out/in CSS feature of first post UX	2	2617	January 8, 2017
Replicating the page load/transition in the Graceful theme Development graceful-theme	2	124	April 2, 2019

.topic-body background color loads after a delay

Related topics