Three taga11y instances coexist on the same page, each with a different theme configuration. CSS custom properties cascade per-instance via the .taga11y block — no global theme conflicts.
No theme option. On a light OS this renders light; switch your OS to dark and it follows automatically.
theme: 'dark' — always dark, regardless of OS setting.
theme: 'light' — always light, even on a dark OS.
<label for="no-theme">No theme — follows OS preference</label>
<input id="no-theme" type="text" name="no-theme" />
<label for="forced-dark">Forced dark mode</label>
<input id="forced-dark" type="text" name="forced-dark" />
<label for="forced-light">Forced light mode</label>
<input id="forced-light" type="text" name="forced-light" />
<script type="module">
import { Taga11y } from '../dist/taga11y.mjs';
const suggestions = [
'Apple', 'Banana', 'Cherry', 'Date', 'Elderberry',
'Fig', 'Grape', 'Honeydew', 'Kiwi', 'Lemon',
];
new Taga11y(document.getElementById('no-theme'), { suggestions });
new Taga11y(document.getElementById('forced-dark'), { suggestions, theme: 'dark' });
new Taga11y(document.getElementById('forced-light'), { suggestions, theme: 'light' });
</script>