Basic Dark mode Demo page with Disqus (JavaScript disabled)

(Updated 2 Apr 2024)

This is a demo page showing the basic functionality required to implement a user switchable Dark mode for a web-page that includes Disqus comments as described in How to setup a Dark mode switch on a web-site.

For web-pages that do not use Disqus comments, the implementation is much simpler, see the Basic Dark mode Demo page.

The user can overwrite the browser’s light/dark setting, and this can be reset to the browser’s setting if required. The browser setting normally follows the operating system’s mode.

For the Disqus comments to display correctly, they need to be set to “Auto” mode by the Disqus administrator in the Admin > Setting > General (at https://<your site>.disqus.com/admin/settings/general/, set the Color scheme Appearance to auto).

On this page, the Disqus comments are only loaded when the user clicks the “Show comments” button. The implementation does not have to be exactly as in this page - the important point to observe is that the Disqus comments must be reloaded upon any change of light/dark mode in order to display correctly. Note that there is a further advantage of only loading the comments when the user clicks the button as it makes page loading much faster, and reduces the data load on the user if they do not want to see the comments.

The JavaScript also detects if a user changes the browser’s setting while the web-page is open, and if the Disqus comments are visible, they will be reloaded, since the Disqus comments will not automatically update. Note that these workarounds for the Disqus comments are necessitated by the fact that the Disqus system does not allow one to set the CSS of the comments which limits the options available.

Note that the colors on this page are deliberately garish rather than set for aesthetic sensibility, this is simply to show how the method works.

See How to setup a dark mode switch for your web-site for details of how to implement the method on a website. If you are using the code for this page, in the loadDisqus ( ) function you will have to set the “disqus_shortname” to your own value and set the “src” to your source URL.

You can download copies of the disqus demo files here:

Note: Perhaps you should consider using a different comment system, see Why I have deleted Disqus from my site.

To see dark mode implemented with a normally hidden reset button, see the page Simple Dark mode Demo page with Reset message.