Disqus Color Scheme

Introduction

Disqus is one of the most popular comment plugin for personal websites. Recently, I wanted to add a dark color scheme to the website but the Disqus was not able to change the color scheme accordingly to be compatible with the website dark scheme.

In this blog post, I would like to discuss how to make Disqus to change color scheme as the website color scheme changes.

Override Disqus Color Scheme

When Disqus color scheme is made “Auto” under the Disqus Admin > Setup > Appearance page on Disqus official website, according to the Disqus customization guidance, the color scheme is determined by the following mechanism.

• The light scheme is loaded when the text color Disqus inherits from your site has >= 50% gray contrast: between color: #000000; and color: #787878;
• The dark scheme is loaded in all other instances.

One additional note, which was not mentioned in the official instruction explicitly, is that Disqus color theme will not change automatically as the website color theme changes, unless the Disqus comment plugin is reloaded.

Problems Encountered and Solutions

The major problem I encountered was that Disqus dark scheme did not work, even if I used a color outside the color range between #000000 and #787878. It turns out that there are two major reasons behind this.

1. The instruction on the Disqus customization guidance is actually wrong. The color that Disqus inherits should be the background color background-color instead of text color color.
2. Any background color that has alpha channel will cause Disqus to use light scheme. Even if the background color is something like rgba(0, 0, 0, 0.5), Disqus will still use light scheme.

Solving the first problem was straightforward, but how do I use the color I wanted while making Disqus dark scheme work? It turns out that we could compute the color without alpha channel that we want by combining the color with alpha channel and the background color using tools such as Filosophy. In my use case, the background color for Disqus was rgba(40, 44, 52, 0.5) and the website background is #0E1225 (rgb(14, 18, 37)), the combined background color without alpha channel for Disqus will be #1B1F2D (rgb(27, 31, 45)). With this background color, Disqus will use dark scheme and the background color remains the same visually as before.

After fixing the background color for Disqus to enable Disqus dark scheme, I would need to enable Disqus automatic reloading upon website color scheme switching. There has been some tutorial on this by creating and listening JavaScript event of color scheme switching. However, my website uses some third-party libraries to load the Disqus plugin and I could not have the fine-grained control on the Disqus JavaScript as what’s discussed in the tutorial. It turns out that reloading Disqus plugin could be as simple as the following.

function switchColorScheme() {
    // Implementation to switch color scheme.
    // ...
    // Assuming Disqus was used as the comment plugin.
    if (typeof DISQUS !== "undefined")
    {
        DISQUS.reset({ reload: true });
    }
}

Conclusions

Enjoy the dark scheme on my website by clicking the toggler at the upper-right corner.

References

• Disqus Appearance Customizations
• The Automatic Disqus Theme Switching
• Basic Dark mode Demo page with Disqus