Basic Dark mode Demo page
using the CSS if( ) conditional

Page last updated 10 Oct 2025

This is a demo page showing the basic functionality required to implement a user switchable Dark mode, mostly as described in How to setup a Dark mode switch on a web-site, but using the CSS if( ) conditional instead of the media property “prefers-color-scheme”. Note that at the time of writing this CSS method is not widely supported and the advice is not to use this method until there is wide support for the method.

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.

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 a Dark/Light method on a website.

You can download copies of these demo files here:

• Download the HTML code: dark-mode-demo-CSS-if.html
• Download the basic CSS: dark-mode-demo-CSS-if.css
• Download the JavaScript code: dark-mode-demo-CSS-if.js

This image is to demonstrate an inversion filter applied only when in dark mode, declared by an if() conditional as:

.invert {
   filter: if(
      style(--MyDarkLight: dark): invert(1);
      else: none;
   )
}