Themeio NPM | npm.io

themeio

Effortless theme switching for your web apps.

themeio allows you to change the style of your app (or parts of it) based on various strategies, e.g. according to the system theme or based on a schedule. It optionally integrates with storage backends to persist a user's preferred theme.

themeio builds on 3 components to do its work, which can be customized to your requirements:

a ThemeStrategy determines when to use which theme
a ThemeRenderer applies the determined theme to your app
a ThemeStore optionally persists the selected theme

By default, themes are rendered by toggling classes on the document.body element.

If you simply want to switch between a light and a dark theme, you can follow the quick start example.

Installation

Use npm or your package manager of choice to install themeio:

npm install --save themeio

Quick Start

The following code shows an example for switching between a dark and a light theme:

<body>
  <script src="node_modules/themeio/dist/default.min.js"></script>
  <button>Toggle Theme</button>
</body>

body.themeio-light {
  background: #fff;
  color: #000;
}

body.themeio-dark {
  background: #000;
  color: #fff;
}

document.querySelector('button').addEventListener('click', () => {
  window.themeio.toggle() // <-- toggle the currently active theme
});

Configuration

themeio ships with various strategies, stores and renderers to choose from. If you can't find a suitable implementation, you can always add your own. Refer to the documentation below for more details.