<meta name="color-scheme" content="light dark" />
  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">
: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.