{"component":{"aria":"Toggle button uses aria-pressed (true/false, not 'mixed'). aria-label updates on toggle to describe the ACTION ('Switch to dark mode' when in light mode). Icon is aria-hidden. Init script must run before first paint to prevent flash — place in as inline script.","category":"wiki","css":".ps-wiki-dark-toggle { display: inline-flex; align-items: center; gap: var(--pds-space-05); padding: var(--pds-space-1); border: 1px solid transparent; border-radius: var(--pds-radius-sm); background: transparent; color: var(--pds-text-secondary); cursor: pointer; transition: background-color var(--pds-duration-fast); }\n.ps-wiki-dark-toggle:hover { background-color: var(--pds-surface-layer-hover); }\n.ps-wiki-dark-toggle:focus-visible { outline: 2px solid var(--pds-focus-ring); outline-offset: 2px; }\n.ps-wiki-dark-toggle__icon { font-size: 1em; line-height: 1; }","description":"Button that toggles data-theme='dark' on the element and persists the choice in localStorage. Initialises from localStorage on load, then falls back to prefers-color-scheme.","display_name":"Wiki Dark Mode Toggle","html":"","name":"wiki-dark-mode-toggle","registry_type":"component","research_links":[],"tabs_available":[],"variants":[{"css_class":"","description":"Compact — icon only, sr-only label.","html":"","name":"icon-only","tokens":[]},{"css_class":"","description":"Icon + visible text label.","html":"","name":"icon-and-label","tokens":[]}],"wcag":{"target":"2.2 AA"}},"tenant":"pointsav","theme":"pointsav-brand"}