How to change the "highlight" color

(Brentley Jones) #1

I’m styling my discourse instance using the CSS customization. How do I change the color of the hint “highlight” that happens when scrolling, viewing a topic, going back to a topic list, etc.?

(Jeff Atwood) #2

Aha, that definitely needs to be an /admin setting. @Neil can you add it to your list?

(Brentley Jones) #3

Thank you. It looks very bad with a dark theme :smile:

(Régis Hanol) #4

@Neil you will find the value here:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/views/topic_view.js#L416

(Sam Saffron) #5

Why admin setting? we should just suck it out of CSS, then you can CSS override it.

(Jeff Atwood) #6

Sure, if that is possible. It wasn’t really possible the way we did click fade highlights on SE.

(nXqd) #7

I have a small question that why don’t we assign that color variable class then we can override that variable easily instead of inline css by using jQuery.

(Brentley Jones) #8

Also, just to be clear, we need to be able to control the text color as well. The biggest issue with it now with my dark theme is it’s changing the text from black to white, causing this weird flashing issue.

Edit Here is a video showing what I mean, so it’s crystal clear:

http://www.screenr.com/2xRH

(Brentley Jones) #9

Hey @Neil I see you have done some work on this. 2 comments so far:

  1. This needs to be applied to the topic list as well, not just the topic page.
  2. I tried simply red as the background-color and it stays red for the whole animation then it goes back to the original color. It might be because I had to use !important to get it to recognize.

Edit: #2 is caused by the !important. Why doesn’t .topic-body .contents.highlighted { background-color: red; } in the customization work? Is the customization CSS running too late for the javascript?

(Neil Lalonde) #10

Oops, yeah I forgot that one. Thanks.

I was able to customize the highlight colour like so:

.topic-body.highlighted, #topic-list .topic-list-item.highlighted {
    background-color: green;
}
(Brentley Jones) #11

Awesome. Thank you! :heart:

(Nick Richards) #12

This doesn’t work for me - the topic list does but not the post. Any ideas?

(Neil Lalonde) #13

I updated my post with the new rules that work.

(Nick Richards) #14

Great, that did it. Thanks very much. :smile:

(magoz) #15

The previous solutions don’t work anymore. This one does:

@keyframes background-fade-highlight {
  0% {
    background-color: green;
  }
  100% {
    background-color: transparent;
  }
}