<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 a small form:</p>
<input type="text">
<button>submit</button>

@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);
}
input {
  font-size: 1rem;
  background-color: var(--page-color);
  color: var(--ink-color);
  border-color: var(--ink-color);
  border-radius: 2px;
}
button {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  background-color: var(--ink-color);
  color: var(--page-color);
  text-transform: uppercase;
  letter-spacing: 0.2ch;
  border-radius: 2px;
}