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.
Strategies
Strategies define when themeio chooses which theme. The following strategies ship with themeio.
You can follow the links to each strategy for details and examples.
-
System Strategy
- changes the theme according to the user's system preference
-
Scheduled Strategy
- changes the theme according to specified time schedules
-
Noop Strategy
- never changes the theme automatically
If none of the available strategies suits your needs, you can define your own by implementing the ThemeStrategy interface.
Renderers
Renderers define how to apply a theme to your app. In most cases, this means making changes to the DOM.
-
Element Class Renderer (default)
- applies a class corresponding to the selected theme to a DOM element
Stores
Stores define how to store a theme when it is changed manually. This is useful for keeping the same theme across sessions.
-
localStorage Store
- uses the browser's
localStorageto store the theme
- uses the browser's
-
Memory Store
- uses a local variable to store the theme
-
Noop Store
- doesn't store themes. Used for disabling theme persistence