StyleFire 🔥

A dead simple tiny JS library to manage themes for your websites and web apps - built for css variables

Install

Embed as a script

<script src="https://unpkg.com/@haxzie/stylefire@1.1.0/dist/bundle.js"></script>

Or install with NPM

npm i @haxzie/stylefire

// importing
import * as styleFire from '@haxzie/stylefire'

Demo

Head over to Codepen to check out how we built a tiny theme switcher using StyleFire.

Usage

StyleFire works by applying class names to the HTML document with all your CSS variables wrapped inside it. You can either create the CSS variables using a JSON file or create your CSS class and pass it to StyleFire.

Applying a global CSS class to your HTML

styleFire.apply('classname');

By default, StyleFire saves the theme name so that you can restore the style whenever the user comes back to your site. Use, init() right after loading styleFire lib in your webpage to pickup last saved theme and apply it.

styleFire.init();

// Or, pass a default theme name to apply if there is no saved theme
styleFire.init('theme_name');

Load your CSS file using StyleFire

If you want to separate the style classes, you can host them separately and load using styleFire.

styleFire.load('themeName', 'link to your CSS file');

/* Sample CSS file with CSS variables */

.my-theme {
    --color-primary: 'white';
    --color-secondary: 'black';
}

Create a StyleSheet with a JSON

Creating your style classes using JSON helps you to manage your styles easily and dynamically.

// Create a json object with all the attributes and values
const themeLight = {
     color: {
        primary: 'white',
        secondary: 'black',
    },
    font: {
        size: {
            small: '0.8em',
            medium: '1em',
            large: '1.6em'
        }
    },
    background: {
        color: '#eeeeee'
    }
}
styleFire.create('myLightTheme', themeLight).then(theme => {
    theme.apply();
});

// Or if you have the JSON file stored remotely you can load that
styleFire.create('myLightTheme', '/themes/light.json').then(theme => theme.apply());

styleFire.create() returns a promise with a theme object which contains a method to apply the theme and the name of the theme

{
    name: String,
    apply: Function
}

This will generate the following CSS and apply it to your website

.myLightTheme {
    --color-primary: white;
    --color-secondary: black;
    --font-size-small: 0.8em;
    --font-size-medium: 1em;
    --font-size-large: 1.6em;
}

Or apply your theme any time after creating!

styleFire.apply('style name');

Then you can use these CSS variables anywhere in your CSS files.

h1 {
    color: var(--font-color-primary);
    font-size: var(--font-size-large);
}

Get the current theme

styleFire.getTheme() returns a theme object which contains the name of current theme.

styleFire.getTheme();

Listen to style changes

StyleFire can take a callback and fire it whenever the themes are changed. Register a callback with onStyleChanged to get the details of the changed theme.

styleFire.onStyleChanged((theme) => {
    // do whatever you want with the theme
    console.log(`Theme changed to ${theme}`);
})

Future upgrades

• Check if the supplied JSON is valid
• Add tests

Contributing

Check the issues to start contributing

License

MIT