<h1><code>light-dark()</code> CSS function</h1>
<section>
  <h2>自动</h2>
  <p>这一部分将自动根据用户设定或用户设备来显示配色</p>
</section>
<section class="light">
  <h2>浅色</h2>
  <p>
    根据<code>color-scheme: light;</code>设定，这部分将显示浅色
  </p>
</section>
<section class="dark">
  <h2>深色</h2>
  <p>根据 <code>color-scheme: dark;</code> 设定，这部分将显示深色.</p>
</section>

:root {
  /* this has to be set to switch between light or dark */
  color-scheme: light dark;

  --light-bg: ghostwhite;
  --light-color: darkslategray;
  --light-code: tomato;

  --dark-bg: darkslategray;
  --dark-color: ghostwhite;
  --dark-code: gold;
}
* {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}
code {
  color: light-dark(var(--light-code), var(--dark-code));
}

.light {
  /* forces light color-scheme */
  color-scheme: light;
}
.dark {
  /* forces dark color-scheme */
  color-scheme: dark;
}

section {
  padding: 0.8rem;
}