Basic Dark mode Demo page with Message

(Updated 10 Oct 2026)

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.

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. This page gives a message to the user regarding the option to reset to the system setting.

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 these demo files here:

To see dark mode implemented without a message to the user, see the page Simple Dark mode Demo page.

SampleGraph

These images demonstrate an inversion filter applied only when in dark mode.

Color Wheel

This element has a border only when in dark mode, declared in a <style> tag in the HTML head as:
  @media (prefers-color-scheme: dark) {
    .myBorder {
      border:5px solid red;
    }
  }

This element has a box-shadow only when in light mode, declared in the CSS file as:
  @media (prefers-color-scheme: light) {
    .myShadow {
      box-shadow: 13px 10px …;
    }
  }

Basic Dark mode Demo page with Message (JavaScript disabled)

Basic Dark mode Demo page with Message