How to Adjust Disqus Color Scheme

Speech Bubbles and text: How to Adjust Disqus Color Scheme

I loved the Disqus commenting system and used it for several years.

When I published a new website, it was impossible to see the discussion box due to the color scheme.

And I began to notice that on certain website templates, the discussion box was almost invisible.

So a visitor could not be expected to leave a comment because the discussion box appeared to be totally missing!

Since I had never encountered this problem before, I was unsure how to correct it. I thought I might be able to fix the plugin’s CSS code, but wasn’t certain.

What I expected to see in the Disqus comment area was:

Disqus Color Scheme Tweak

But what I actually saw was that most of the formatting and text were invisible:

before-disqus-color-scheme

I thought I might be able to apply custom CSS to adjust the Disqus color scheme, but a quick e-mail to Disqus support and I was told it’s currently not possible to apply custom CSS to the new Disqus.

I learned that Disqus will automatically apply a scheme based on the text color it inherits from a website.

So depending on whether your template’s stylesheet has a light or dark color scheme, Disqus will make a selection.

That means if the gray contrast s 50% or greater, Disqus will load a light color scheme. Otherwise, it loads a dark scheme.

How to Adjust Disqus Color Scheme

There are two ways that you can adjust the Disqus Color Scheme.

Change Disqus Admin Settings

You might have to try a few tweaks to get this to work for your particular theme. The simplest way to do this follows:

To adjust Disqus color scheme, log into Disqus admin and choose General settings.

Once there, select the light or dark scheme depending on your site’s stylesheet. Since my theme was light, I chose light backgrounds.

You can also specify “auto” and Disqus will make the choice for you, but I believe that’s where my problem came in.

Testing is tricky because the browser cache needs to be refreshed or cleared before the changes will show.

If you don’t see your changes right away, try clearing your browser cache.

If that doesn’t work, log out of Disqus and log back in.

Finally, try testing with another browser to see if the appearance has changed properly.

Modify Stylesheet Directly

If you still can’t adjust the Disqus color scheme by using the procedure above, follow this procedure for modifying your stylesheet directly.

Hopefully by now you have your Disqus comment area displaying properly!

Has this procedure worked for you?

If you are still having problems, please leave a comment below and I’ll try to help you troubleshoot.

16
Leave a Reply

avatar
7 Comment threads
9 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
Michelle PhillipsCynthiaגַבְרִיאֵלIris LeeArquitetura Sustentável Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Cynthia
Guest

I just installed Disqus on my blog and the background is transparent. I tried both the light and dark color schemes and still the text can’t be read. I wonder if I can change the background color of the comment area?

גַבְרִיאֵל
Guest
גַבְרִיאֵל

DISQUS could simply use black text on a white back ground yet fails to do so or allow its users to do so. It is the single greatest failing of the entire system. What good are comments which have such poor contrast as to be invisible ink? It is forced upon users by lack of alternative. As long as sites use DISQUS their readers are condemned to barely legible comment sections. If only a replacement were available to the general public this antediluvian word processor could finally be replaced by something people could actually read.

Imagine the shock?

Iris Lee
Guest

Thanks for the cache tip! I was so stressed out because of it as I’ve gotten my first comment and it was sorta embarrassing that it was totally invisible. The person was still nice enough to leave a message though. Anyway, again, thanks!

Michelle Phillips
Guest
Michelle Phillips

I’m very happy this helped, Iris! Thank you so much for taking time to let me know!

Arquitetura Sustentável
Guest

Great article. Could you tell me how can I change the color of the dividing line?

Michelle Phillips
Guest
Michelle Phillips

Hi, thanks for your comment. I’ll try to take a look at it over the weekend and will post

a solution if I can.

Arquitetura Sustentável
Guest

Thank you very much Michelle!!!!!

Michelle Phillips
Guest
Michelle Phillips

You’re welcome, Arquitetura! 🙂

mesfinalm
Guest
mesfinalm

Thank you very much for saving my time due to caching problem.

Michelle Phillips
Guest
Michelle Phillips

You are very welcome. Thanks for letting me know it helped!

Wesley
Guest

Thanks for the cache tip. I wasn’t seeing any changes when I was choosing the option for darker sites. It’s the reason I did a Google search in the first place. Once I read this, I went to test it on my phone and it looked good. Then I cleared the cache on my computer and all was right there too.

Michelle Phillips
Guest
Michelle Phillips

You’re welcome, Wesley! Glad you found the post helpful; thanks for taking time to leave a comment. Caching can make testing tricky; I know it took me awhile to finally figure it out 🙂

W. Patrick Jones
Guest
W. Patrick Jones

So I’m setting up a WP site and I’m having the same problem. Disqus is installed and connected (if I make a comment on the blog, it shows up on the Disqus admin site). But when I change the Disqus Admin Settings for color (I asked for lighter backgrounds and font with Serifs) there is literally no change on the WP site. I’m sifting through CSS now, but that is not my strong suit and I can’t tell if Disqus is inheriting the CSS or not. It doesn’t appear to because, for instance, links in the blog are readable, but… Read more »

Michelle Phillips
Guest
Michelle Phillips

Hi there, thanks for your question. I had the same problem with testing after applying the Disqus light background. I’m assuming you’ve cleared the browser cache and tried testing with another browser? If that still doesn’t work, then log out of WordPress, log out of Disqus and log back in. That’s when I could finally see the change. If you are still having problems, post a link to your site and let’s see if it’s displaying properly outside of your network.

Scroll to Top

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close