Color-scheme aware CSS checkered background.

checkered-background.css

:root {
    font-size:24px;
    --backgroundColor: rgba(255, 255, 255);
    --squareColor: rgba(100, 100, 100, .5);
    --squareSize: 2em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --backgroundColor: rgb(0, 0, 0);
  }
}

.checkered {
    background-color: var(--backgroundColor);
    background-image:
      linear-gradient(45deg, var(--squareColor) 25%, transparent 25%), 
      linear-gradient(135deg, var(--squareColor) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, var(--squareColor) 75%),
      linear-gradient(135deg, transparent 75%, var(--squareColor) 75%);
    background-size:calc(2 * var(--squareSize)) calc(2 * var(--squareSize)); 
    background-position:0 0, var(--squareSize) 0, var(--squareSize) calc(-1 * var(--squareSize)), 0 calc(-1 * var(--squareSize)); 
}

Demo here