CodePen Embed - prefers-color-scheme Example

<div class="bg">
  <p class="primary-text">Primary Text</p>
  <p class="secondary-text">Secondary Text</p>
</div>

:root {
  --primary-font-color: #111827;
  --secondary-font-color: #374151;
  --bg-color: #f9f9f9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-font-color: #ffffff;
    --secondary-font-color: #d1d5db;
    --bg-color: #181818;
  }
}

.primary-text {
  color: var(--primary-font-color)
}

.secondary-text {
  color: var(--secondary-font-color)
}

.bg {
  padding: 8px;
  width: 200px;
  height: 100px;
  background: var(--bg-color)
}

This Pen is owned by coding clone on CodePen.

See more by @coding-clone on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.