Posted on Sep 5, 2020 • Originally published at diegosanchezp.github.io

I've made a web component to easily implement and switch two themes in a webpage.

A lot of websites nowadays have this feature of having two color schemes for the user to choose, namely "dark" and "light", implementing this is a peace of cake with the help of CSS custom properties (variables) and a bit of ECMAscript. Today I present you a web component that abstracts the ECMAscript part and lets you switch between the themes dynamically.

Using the component is straightforward. The component adds and updates a data attribute "data-theme" to the body element which you can handle in CSS via attribute selectors, so depending on the theme you have you can update your theme variables.

See a live demo before using it.

Usage example

To install it use your preferred package manager.

npm install theme-switcher-component

yarn add theme-switcher-component

In a .html file include and declare the component.

<html lang="en"> <head> <meta charset="utf-8"> <title>Theme switcher component demo</title> <link rel="stylesheet" href="./styles.css"> <!-- Include the component --> <script type="module" src="./node_modules/theme-switcher-component/switch.js" defer></script> </head> <body> <main> <section> <p>Components are not applications, they are just a part of the whole.</p> <!-- Declare the component --> <!-- The first element of the array themes defines the default theme --> <theme-switcher themes='["light", "dark"]' verbose></theme-switcher> </section> </main> </body> </html>

Note: other names in the themes array rather than the typical "light" and "dark" can be defined, for example, "solarized" and "tango".

In a .css file declare in the root selector the css variables to use and change their values accordingly to the two themes defined selecting the body.

/* Define a theme with variables */ :root { /* Light theme the default*/ --border-color: black; --bg-color: white; } /* Change variables values accordingly*/ body[data-theme="dark"]{ --border-color: white; --bg-color: black; } /* ... More CSS rules below ... */

After a theme is changed, it gets stored to localStorage, if you want to see values of the local store and the current theme set the verbose attribute to the custom element, like the example.

That's it ! Hope this helps you.

If you want more in depth documentation check the github repository