.topic-body background color loads after a delay

Product Support
2

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