How to Adjust Disqus Color Scheme

Speech Bubbles and text: How to Adjust Disqus Color Scheme

This post will explain how to adjust the Disqus color scheme.

Though I don’t use Disqus anymore, I have retained this post to help others who struggle with the Disqus color scheme.

What often happens is that it’s impossible to see the discussion box due to the type of website template or theme that is in use.

And on certain website templates, the discussion box can be almost invisible.

So a visitor can’t leave a comment because the discussion box appears to be totally missing!

As an example, in the screen shot below what I expected to see in the Disqus comment area was:

Disqus Color Scheme Tweak

But what I actually saw on my old site 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.

Similar Posts