# .topic-body background color loads after a delay

**URL:** https://meta.discourse.org/t/topic-body-background-color-loads-after-a-delay/232862
**Category:** Support
**Tags:** css
**Created:** [July 14, 2022, 10:52am UTC](https://meta.discourse.org/t/topic-body-background-color-loads-after-a-delay/232862 "2022-07-14T10:52:02Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![riteshsaini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riteshsaini/32/266453_2.png) [@riteshsaini](https://meta.discourse.org/u/riteshsaini)
#### Post date: [July 14, 2022, 10:52am UTC](https://meta.discourse.org/t/topic-body-background-color-loads-after-a-delay/232862/1 "2022-07-14T10:52:02Z")

</div>

Hi,

I’m using a dark background with white `.topic-body` for contrast.

This is the CSS I’m using:

```plaintext
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](https://global.discourse-cdn.com/meta/original/4X/9/f/4/9f45e52b0eb719c0b0ea507bed912a33b0285f68.png)

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [July 14, 2022, 11:27am UTC](https://meta.discourse.org/t/topic-body-background-color-loads-after-a-delay/232862/2 "2022-07-14T11:27:18Z")

</div>

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 🔽

```scss
@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. 🔽

This will override the default keyframes.

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

```

* * *

If you want to create a new keyframes 🔽

```scss
// 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.

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

```

* * *

**The full code looks something like this.** 🔽

```scss
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**

---

<div class="post-metadata">

### Author: ![riteshsaini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riteshsaini/32/266453_2.png) [@riteshsaini](https://meta.discourse.org/u/riteshsaini)
#### Post date: [July 14, 2022, 4:07pm UTC](https://meta.discourse.org/t/topic-body-background-color-loads-after-a-delay/232862/3 "2022-07-14T16:07:41Z")

</div>

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 🙂

---

<div class="post-metadata">

### Author: ![maiki](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/maiki/32/233950_2.png) [@maiki](https://meta.discourse.org/u/maiki)
#### Post date: [July 14, 2022, 6:14pm UTC](https://meta.discourse.org/t/topic-body-background-color-loads-after-a-delay/232862/4 "2022-07-14T18:14:36Z")

</div>

Hi @riteshsaini. 👋

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

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [August 13, 2022, 6:52pm UTC](https://meta.discourse.org/t/topic-body-background-color-loads-after-a-delay/232862/8 "2022-08-13T18:52:13Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.