Switch theme
How to offer a theme change
If you try interacting with the switch just above, you will see that you can toggle the theme of the entire page between the standard style and an inverted version with one click. The key to achieving this is by using the following CSS code to invert all colours on your page, and only applying the style to a class that you then add when the toggle state is active (in this case the invert class):
Note: This applies to almost all modern browsers, with Internet Explorer being the only notable exception. This example project also contains:
- Fallback styles to apply to the
invertclass to make this work in Internet Explorer - JavaScript to toggle the adding/removing of the
invertclass when the switch is changed - JavaScript to make the switch interactive for users using only a keyboard.
Why offer a theme change?
Users with various visual impairments can have trouble interacting with certain colour schemes, and these barriers can alter based on a range of factors such as the time of day. As a result, it can be helpful to provide users with the ability to quickly switch to a colour scheme they feel more comfortable with, rather than forcing them to find software to achieve the same result or, more likely, another site to achieve what they were going to do on yours. A feature such as this can be trivial to implement, and can appeal to all users.