How to Adjust Disqus Color Scheme

Updated: 3/29/2016

Note: I really did love the Disqus commenting system and have used it for several years. Then I learned that Disqus started tracking visitors on my site. So like many other bloggers,  I pulled the plug on Disqus for my main website. I’m using native WordPress comments here with the wp-Discuz plugin for styling and notifications. So far, so good! However, my personal website still uses Disqus so the following information is still relevant.

Colored Speech Bubbles

When I published my personal website last year, the Disqus comment area was nearly invisible.

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

I have never encountered this problem before, and 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.

Adjust Disqus Color Scheme

1. Change Disqus Admin Settings

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

To adjust Disqus color scheme, log into Disqus admin and choose settings as shown below:

Disqus Settings

Once there, select the light or dark scheme depending on your site 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.

disqus-appearance

Testing is tricky because the browser cache needs to be refreshed or cleared before the changes will show. If that doesn’t work, log out of Disqus and log back in. Or try testing with another browser to see if the appearance has changed properly.

2. 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, you now have your Disqus comment area tweaked properly!

If you’ve encountered this problem with your WordPress website, how did you fix it? Please share your solution in the comments below!

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
newest oldest most voted
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!

Arquitetura Sustentável
Guest

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

mesfinalm
Guest
mesfinalm

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

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.

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 »

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