solid-create-material-theme

solid-create-material-theme

This is a fork of use-material-you by @maiconcarraro.

Solid.js hook to create dynamic schemes and variants based on material-foundation/material-color-utilities. Inspired by Material Theme Builder.

The goal is to simplify the usage, already returning HEX values to immediately usage and supporting HEX, RGBA and URL.

It supports all main variants from material-color-utilities. Plus a new variant named image-fidelity that is going to use the top 3 dominant colors from the image, dedicated to situations where you want to create beautiful gradients, inspired by color-thief.

Install

npm install solid-create-material-theme

Usage

From a HEX color:

const [scheme] = createMaterialTheme("#7C3AED", {
  variant: "tonal_spot",
  isDark: false,
  contrastLevel: "standard",
});

return (
  <Box style={{ background: scheme.primary, color: scheme.onPrimary }}>
    Primary
  </Box>
);

From a RGBA color:

const [scheme] = createMaterialTheme("rgba(124, 58, 237, 0.5)", {
  variant: "fidelity",
  dark: true,
  contrastLevel: "medium",
});

// ...

From an image URL:

const [scheme, state] = createMaterialTheme(
  "https://uploads.sitepoint.com/wp-content/uploads/2021/04/1618197067vitejs.png",
  {
    variant: "image_fidelity", // new variant to use top 3 dominant colors from image
  },
);

// ...

Example

You can view the example by running npm run preview after cloning the project and running npm install. The source code for the example is in the example directory.

Variants

Name	Description
"tonal_spot"	Default for Material theme colors. Builds pastel palettes with a low chroma.
"fidelity"	The resulting color palettes match seed color, even if the seed color is very bright (high chroma).
"monochrome"	All colors are grayscale, no chroma.
"neutral"	Close to grayscale, a hint of chroma.
"vibrant"	Pastel colors, high chroma palettes. The primary palette's chroma is at maximum. Use fidelity instead if tokens should alter their tone to match the palette vibrancy.
"expressive"	Pastel colors, medium chroma palettes. The primary palette's hue is different from the seed color, for variety.
"content"	Almost identical to fidelity. Tokens and palettes match the seed color. primaryContainer is the seed color, adjusted to ensure contrast with surfaces. The tertiary palette is analogue of the seed color.
"rainbow"	A playful theme - the seed color's hue does not appear in the theme.
"fruit_salad"	A playful theme - the seed color's hue does not appear in the theme.
"image_fidelity"	Not an official variant, custom made. It extracts top 3 dominant colors and set as primary, secondary and tertiary palettes.