Skip to content

Alex Carpenter

Staff UI Engineer at Clerk

Grand Rapids, MI.

Clever property usage to create a light-dark probe

x.com/thomas_sweet

@property --scheme-probe {
  syntax: "<color>";
  inherits: true;
  initial-value: white;
}

.card {
  --scheme-probe: light-dark(white, black);
}

@container style(--scheme-probe: black) {
  .swatch {
    border-style: dashed; /* any property */
  }
}