Monet

A lightweight JavaScript library for generating dynamic color palettes based on the Material Design 3 color system. It can be used to create themes that adapt to a primary color, and it supports both CSS custom properties and Tailwind CSS.

Usage

You can install monet using npm:

npm install dejesusbg/monet

To use monet with CSS custom properties, import the Theme class and call the set method with your primary color. This will generate a <style> tag in the document head with the color palette defined as CSS variables.

import Theme from 'monet';

// Generate and apply the color palette
Theme.set('#6750A4'); // Use any valid CSS color

// You can also provide an optional secondary color
Theme.set('#6750A4', '#FF0000');

The generated CSS variables will be available on the body element:

body {
  --primary-100: #ffffff;
  --primary-99: #fef7ff;
  /* ...and so on */
}

You can then use these variables in your CSS:

.my-element {
  background-color: var(--primary-50);
  color: var(--primary-900);
}

Tailwind CSS

To use monet with Tailwind CSS V3, call the set method with the type parameter set to 'tailwind'. This will return a configuration object that you can merge with your tailwind.config.js.

// tailwind.config.js
import Theme from 'monet';

const colors = Theme.set('#6750A4', null, 'tailwind');

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors,
    },
  },
  plugins: [],
}

API

Theme.set(primary, [secondary], [type])

• primary (string): The primary color for the theme. Any valid CSS color format is accepted.
• secondary (string, optional): The secondary color for the theme.
• type (string, optional): The output format. Can be 'css' (default) or 'tailwind'.

Returns an HTMLStyleElement when type is 'css', or a Tailwind CSS colors object when type is 'tailwind'.

Theme.toggle()

Toggles the theme between light and dark modes by adding or removing the dark class from the body element.

import Theme from 'monet';

// Set the initial theme
Theme.set('#6750A4');

// Toggle between light and dark mode
const themeToggle = document.getElementById('theme-toggle');
themeToggle.addEventListener('click', () => {
  Theme.toggle();
});