Tagged “toggle”
Use CSS :has to set root-level styles based on a button’s state
Great tip here from Jhey. He advises using a button with ARIA and a little JavaScript for your dark-mode toggle. And to apply the dark styles, use a CSS selector which targets the :root parent of the button when in “pressed” state and sets a root-level custom property to “on”.
:root:has([aria-pressed=true]) {
--dark:1;
}Seriously clever stuff!
And aside from the CSS, I really like the way Jhey advocates using a button rather than a form element such as a checkbox for this kind of interface, much like Léonie did recently.
Building an accessible show/hide disclosure component with vanilla JS (Go Make Things)
A disclosure component is the formal name for the pattern where you click a button to reveal or hide content. This includes things like a “show more/show less” interaction for some descriptive text below a YouTube video, or a hamburger menu that reveals and hides when you click it.
Chris’s article provides an accessible means of showing and hiding content at the press of a button when the native HTML details element isn’t suitable.
See all tags.