body {
  --color: #ff6961;
  --content: '🙅‍♀️ no compatible';
  
  background-color: var(--color);
  font-family: sans-serif;
}

body::after {
  content: var(--content);
}

@media (prefers-color-scheme: light) {
  body {
    --color: white;
  --content: '🌞 light version';
  }
}

@media (prefers-color-scheme: dark) {
  body {
    --color: black;
    --content: '🌑 dark version';
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.