Plattform · Container Style Queries

Ein Baustein, drei Lichter.

Jede Sektion setzt nur --ton. Karten, Knöpfe, Tabellen und Fokusring fragen den Ton per @container style() ab und stellen sich selbst um. Schalten Sie den Ton jeder Sektion oben rechts.

/* 1. Rückfall, zuerst im Stylesheet */
:where([data-ton="nacht"]) > .ton-innen { --flaeche: #15171F; … }
/* 2. Das Muster, gewinnt bei gleicher Spezifität */
@container ton style(--ton: nacht) {
  .ton-innen { --flaeche: #15171F; … }
}
/* 3. Skript: dasselbe Wort als Attribut */
el.style.setProperty('--ton', ton); el.dataset.ton = ton;