<main class="light">
    <h1>Scope Demo 1: Light/Dark Modes</h1>

      The outer context uses light mode 
      as the default.
  <section class="dark">
    <h2>Nested "Dark Mode"</h2>
      We can change the mode
      on specific elements or
.dark {
  background: black;
  color: white;

.light {
  background: white;
  color: black;

/* layout */
*, *::before, *::after {
  box-sizing: border-box;

main {
  font-size: calc(1em + 0.5vw);
  display: grid;
  min-height: 100vh;
  place-content: safe center;
  padding: 1em;

section {
  padding: 1em;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.