@function --light-dark(--light, --dark) { /* Default to the --light value */ result: var(--light); /* If the container is set to "dark", use the --dark value */ @container style(--scheme: dark) { result: var(--dark); } } /* Allow overriding the --scheme from the data-scheme HTML attribute */ @scope ([data-scheme]) { /* Get the value from the attribute */ :scope { --scheme: attr(data-scheme type(<custom-ident>)); } /* When set to system, use the --root-scheme value (which is determined by the MQ) */ :scope[data-scheme="system"] { --scheme: var(--root-scheme); } /* This allows the native light-dark() to work as well */ :scope > * { color-scheme: var(--scheme); } /* Because the elements with the attribute are extra wrapper elements, we can just display its contents */ display: contents; }…