AdamEisfeld / VueThemer

Themer

Usage

Create a css class for each theme you want to support. Use css vars to define your values:

.darkMode {
    --backgroundColor: black;
    --foregroundColor: white;
}

.lightMode {
    --backgroundColor: white;
    --foregroundColor: black;
}

Create top-level css variables that reference these theme variables. Example using Stylus (saved as themes/theme.styl):

.theme = {
    colors: {
        background: var(--backgroundColor);
        foreground: var(--foregroundColor);
    }
}

Optionally add an automatic import of your css via a vue.config.js file in the root of your project:

module.exports = {
	css: {
		loaderOptions: {
		stylus: {
			import: [
			'~@/themes/theme.styl',
			],
		},
		},
	},
};

Initialize and configure a new Themer instance in your main Vue app (App.vue), passing an array of the themes you wish to support, along with the theme to initially apply:

const themer = new Themer(["lightMode", "darkMode"], "lightMode");

Get the current applied theme from your Themer:

const currentTheme = themer.currentTheme();
console.log(currentTheme); // lightMode

Switch the current theme (takes affect immediately):

themer.setCurrentTheme("darkMode");
console.log(themer.currentTheme()); // darkMode

Use the theme values in your components' style tags:

<style lang="stylus" scoped>
div {
	background-color: theme.colors.background;
	color: theme.colors.foreground;
}
</style>