<p>Using the prefers-color-scheme media feature, you can update your website’s colors to match the preferences of your users.</p>
<p>If a user has expressed a preference for a dark color scheme in their operating system, your website’s color scheme will reflect that choice.</p>
<p>Here’s an example of an image:</p>
  <source srcset="https://storage.googleapis.com/web-dev-uploads/image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/yNbeZfMBON7NXVNrKxdU.png" media="(prefers-color-scheme: dark)">
  <img src="https://storage.googleapis.com/web-dev-uploads/image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/0pcgZdZTp6GfwQecxMKz.png" alt="A map of Brooklyn.">
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap");
html {
  --page-color: white;
  --ink-color: black;
@media (prefers-color-scheme: dark) {
  html {
    --page-color: black;
    --ink-color: white;
body {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  line-height: 1.55;
  letter-spacing: 0.03ch;
  background-color: var(--page-color);
  color: var(--ink-color);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.