solid-create-material-theme v1.0.0

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