.page-container.dark {
  [data-scope="easing-variables"] {
    .easing-variables {
      background: #ddd;
      color: black;
    }
  }
  [data-scope="constant-width-to-height-ratio"] {
    .constant-width-to-height-ratio {
      background: #ddd;
    }
  }
  [data-scope="display-table-centering"] {
    .container {
      border-color: #ddd;
    }
  }
  [data-scope="ghost-trick"] {
    .ghosting {
      background: #a307c2;
    }
  }
  [data-scope="transform-centering"] {
    .parent {
      border-color: #ddd;
    }
  }
  [data-scope="truncate-text-multiline"] {
    .truncate-text-multiline::after {
      background: linear-gradient(to right, rgba(255, 255, 255, 0), #2a314c 50%);
    }
  }
  [data-scope="circle"] {
    .circle {
      background: #ddd;
    }
  }
  [data-scope="etched-text"] {
    .etched-text {
      text-shadow: 0 2px black;
      color: #424d76;
    }
  }
  [data-scope="focus-within"] {
    label {
      color: #fff;
    }
  }
  [data-scope="overflow-scroll-gradient"] {
    .overflow-scroll-gradient__scroller {
      background: #2a314c;
    }
    .overflow-scroll-gradient::after {
      background: linear-gradient(rgba(0, 0, 0, 0.001), #2a314c);
    }
  }
  [data-scope="pretty-text-underline"] {
    .pretty-text-underline {
      text-shadow: 1px 1px #2a314c, -1px 1px #2a314c, -1px -1px #2a314c, 1px -1px #2a314c;
    }
  }
  [data-scope="reset-all-styles"] {
    .reset-all-styles {
      color: white;
    }
  }
  [data-scope="shape-separator"] {
    .shape-separator {
      background: #ddd;
      &::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%232a314c'/%3E%3C/svg%3E")
      }
    }
  }
  [data-scope="triangle"] {
    .triangle {
      border-top: 20px solid #ddd;
    }
  }
  [data-scope="zebra-striped-list"] {
    li:nth-child(odd) {
      background-color: #424d76; 
    }
  }
}