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

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

.dark, .light {
  color-scheme: var(--color-scheme);
}

.dark {
  --color-scheme: dark;
}

.light {
  --color-scheme: light;
}

section {
  background: light-dark(#ddd, #222);
  color: light-dark(#222, #ddd);
  
  @container style(--color-scheme: light) {
    /* adapt anything you want */
    border: 10px solid pink;
  }
  
  @container style(--color-scheme: dark) {
    /* adapt anything you want */
    border: 5px dashed cyan;
  }
}











@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;
    }
  }
  
  .dark, .light, section {
    display: grid;
  }
  
  section {
    padding: 5vmin;
  }
}