Basic Dark mode Demo page with Disqus (JavaScript disabled)

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.

All the demo code can be downloaded in a zipped file at dark-mode-demo.zip.

 

Comments:   Feel free to post a comment …

Diverse opinions and criticisms are welcome, but messages that are frivolous, irrelevant or devoid of logical basis will be blocked. Difficulties in understanding the site content are usually best addressed by contacting me by e-mail. Note: you will be asked to provide an e-mail address - any address will do, it does not require verification. Your e-mail will only be used to notify you of replies to your comments - it will never be used for any other purpose and will not be displayed. If you cannot see any comments below, see Why isn’t the comment box loading?.