<h1>Theming</h1>
<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 some images:</p>
<img src="https://storage.googleapis.com/web-dev-uploads/image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/mszWXspZz2CF6Fm4y05W.jpg" alt="Flowers.">
<img src="https://storage.googleapis.com/web-dev-uploads/image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/kmIGHoOyN8htKpAQkDLX.jpg" alt="Mandolin.">
<img src="https://storage.googleapis.com/web-dev-uploads/image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/J4Pt9TVFRzrACPFylnfI.jpg" alt="A tram in Lisbon.">

@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;
  }
  img {
    filter: brightness(.8) contrast(1.2);
  }
}
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);
}