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.
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.