Chapter 14: Container style queries
Style queries are based only on custom properties (variables) as of this recording. Work in Chrome, as Firefox has no support for style queries as of this recording in April 2024.
Changing themes with style queries
Let’s set up the following example. I want to add a checkbox to the top of this page that says “dark theme.” If the box is checked, then I want the page to display in the dark theme. If it’s unchecked, I want the light theme. We'll use style queries and a little JavaScript to make this work.