<head>
  <meta name="color-scheme" content="light dark" />
</head>
<body>
  Hello!<br/>
  This is an example for default theme toggler.<br/>
  
  Try to change your system mode and this website will auto adapt to it.<br/>
  It still works with inputs and other native elements: <input type="date">
</body>
:root {
  --text: black;
  --background: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: white;
    --background: black;
  }
}

body {
  color: var(--text);
  background: var(--background);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.