Simple Dark mode Demo page with Reset message (JavaScript disabled)

(Updated 2 Apr 2024)

This is a demo page showing the basic functionality required to implement a user switchable Dark mode as described in How to setup a Dark mode switch on a web-site, together with a message regarding resetting to system mode.

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. The message regarding resetting to system mode appears the first two time the uses changes the mode and after that it does not appear.

To test after the first two times, you need to either open the developer console and write and execute:
localStorage.removeItem('ShowDarkMessage');
or delete the site data in your browser.

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.

You can download copies of the basic demo files here: