v145 · CSS · Container Queries · demo
Theme Matrix
Four widget instances, each wrapped in a differently-named container. A single .widget component responds to four theme contexts — theme-light, theme-dark, theme-accent, and theme-mono — with no size queries and no JavaScript. The controls let you swap any cell's theme at runtime.
Chrome 145+ — name-only container queries (
container-name without container-type). In older browsers all widgets render in the default style — the @container theme-* rules are silently ignored.
Change any cell's theme using the controls · the same widget component responds to each named container context automatically
/* Name-only container queries — Chrome 145 */
/* No container-type needed — just set container-name */
.theme-dark { container-name: theme-dark; }
.theme-light { container-name: theme-light; }
/* Component reacts to named context — no size queries involved */
@container theme-dark style() {
.widget { background: #1a1a2e; }
.widget-title { color: #e2e8f0; }
.widget-btn { background: #7f52ff; }
}
@container theme-light style() {
.widget { background: #fff; }
}
/* Usage: wrap in any named container to apply the theme */
/* <div class="theme-dark"><div class="widget">…</div></div> */