switch-theme

switchTheme

Create custom theme for your tailwindcss project;

Installation

# Yarn
yarn add switch-theme --dev

# NPM
npm install switch-theme --dev

Usage

To start using this plugin you need to add it to your tailwind configuration file.

// tailwind.config.js

module.exports = {
	...
	plugins: [require('switch-theme')()],
}

Add Theme

In configuration file

const switchTheme = require('switch-theme');

module.exports = {
	customTheme: {
		light: {
			selector: '.light-theme',
			isDefault: true,
			scheme: {
				backgroundColor: {
					primary: '#0070F3',
	        warning: '#ECC94B',
	        danger: '#F56565',
				},
				textColor: {
					default: '#161b25',
					light: '#1d2331',
				},
			},
		},
		dark: {
			selector: '.dark-theme',
			scheme: {
				textColor: {
					default: '#F7FAFC',
					light: '#EDF2F7',
				},
			},
		},
	},
	plugins: [switchTheme()],
}

and in your project

<div class="bg-primary text-default bg-opacity-75">
	...
</div>