<h1>This is a title</h1>

<p>I am just a boring text, existing here solely for the purpose of this demo</p>

<p>And I am just another one like the one above me, because two is better than having only one</p>

<a href="#">I am a link</a>
body {
  background: #fff;
  font: 100% system-ui;

p {
  color: #222;

body.dark-theme {
  background: #121212;
body.dark-theme h1,
body.dark-theme p {
  color: #eee;
body.dark-theme a {
  color: #809fff;
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

if (prefersDarkScheme.matches) {
} else {

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.