<section class="dark">
  <h1>Dark</h1>
  
  <section class="light">
    <h1>Light</h1>
    
    <section class="dark">
      <h1>Dark</h1>
    </section>
  </section>
</section>

<section class="light">
  <h1>Light</h1>
  
  <section class="dark">
    <h1>Dark</h1>
    
    <section class="light">
      <h1>Light</h1>
    </section>
  </section>
</section>

.dark {
  color-scheme: dark;
}

.light {
  color-scheme: light;
}

section {
  background: light-dark(#ddd, #222);
  color: light-dark(#222, #ddd);
}











@layer support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;
    display: grid;
    
    @media (orientation: landscape) {
      grid-auto-flow: column;
    }
  }
  
  section {
    display: grid;
    padding: 5vmin;
  }
}