<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 are some form fields:</p>
<input type="text">
<select>
  <option></option>
  <option>first choice</option>
  <option>second choice</option>
  <option>third choice</option>
</select>
<button>button</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 {
  color-scheme: light;
  --page-color: white;
  --ink-color: black;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
    --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);
}