About

themer was made as a part of commitlog-web. To support both system preference and manual selection by users for the base theme of an app. It bases off it's decision based on the state set by the user. If a user is visiting the site for the first time the state is set to pick the current system preference and set that as the chosen theme

If the user then decides to switch the theme using the toggle, the selected theme is set as a permanent preference for that website unless the site data is cleared from the browser.

Demo

A demo of the above can be seen both at commitlog-web and on this very site.

or you could use the below custom implementation

Usage

The library was built for vanilla javascript so it's pretty easy to use in any other framework/ui-library that you might choose to use. I'll list out the basic steps.

Install `@barelyreaper/themer` if using a bundler or add this to your html scripts.

npm i @barelyreaper/themer

<script src="https://www.unpkg.com/@barelyreaper/themer"></script>

Next, we create an instance of Themer with the trigger element passed to it to use the default icons provided by the library, (this needs feather-icons installed)

npm i feather-icons

You can then follow the example below

<main class="container-bounds">
<div>
  <button class="no-border icon" id="toggleTheme"></button>
</div>
<div>
  <button id="customToggleTheme" class="secondary">Enable Light Mode</button>
</div>
</main>
<script src="https://unpkg.com/feather-icons"></script>
<script src="node_modules/themer/dist/index.umd.js"></script>
<script>
// The default themer
// Needs feather-icons!
new Themer({
  trigger: document.getElementById('toggleTheme'),
});

// Custom themer
const themerInstance = new Themer();

const enableLightMode = document.getElementById('customToggleTheme');


enableLightMode.addEventListener('click', (event) => {
  themerInstance.setTheme('light');
});
</script>

Support

If you do like this project, please consider supporting it.