Scheme Switch Alpha

Scheme Switch Alpha is a complete, fully accessible scheme switcher.

On the surface, it’s a simple, animated button that changes states when clicked. As the user, you’re able to add any custom icon and label text that you’d like.

Under the hood, a lot is going on that’s important for toggling color schemes. Most of it is controlled natively with Bricks Interactions, namely:

1. When one button is clicked, it hides itself and animates the icon of the other button.
2. The local storage preference (key = preferes-color-scheme) value (main or alt) changes as the user toggles between the two buttons.
3. When the user clicks to see the alt scheme, the class .color-scheme--alt will be added to the HTML tag of the document.
4. When the user clicks to see the main scheme, the .color-scheme--alt class is removed.
5. When the icon is added to a page, the page will check for local storage preference on load. If the preference is Alt, the class .color-scheme--alt will be added to the HTML tag of the document by default. This ensures the user sees the scheme they chose during their last session.
6. If the user has no color-scheme preference in local storage, the main button will load by default and the Alt button will be hidden by default.
7. If the user’s local storage shows that they prefer the Alt scheme, the Alt button will load by default and the Main button will be hidden by default.

Lastly, there’s a code block to ensure accessibility. Since there are two buttons, we need to ensure the focus is set on the opposite button whenever one of the buttons is clicked and hidden. Make sure you activate this code block when you insert the frame.

• Do not remove the button labels. Doing so will break accessibility because there won’t be any text to give context to the icons for assistive technology. If you don’t want the button label, apply the class .hidden-accessible to it. This will hide the labels for sighted users while retaining them for assistive technology.
• Do not remove the code block. Doing so will break accessibility because the user won’t be able to keyboard navigate the icons properly as they toggle them.