theme-selector Demo

Unfortunately, because most of these examples are manipulating data attributes against the root element, you may find conflicts when manipulating the different select fields. You can see the effect of each theme-selector by setting each of their values to the Light / Black on White and then toggling them individually back and forth.

General usage example

Example using a custom storage key

Example using a custom dark theme key

Example with a custom transition class and duration to keep the class applied *

* You will likely want this to be equal or be greater than any CSS transitions you have applied.

Example targeting a specific element to apply the theme to

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit id nulla vitae maximus. In bibendum risus in commodo fermentum. Vestibulum elementum turpis ac aliquam pulvinar. Nulla vitae varius lorem.