laurentpayot / material-dynamic-colors

Material Dynamic Colors

This project is based on https://material-foundation.github.io/material-theme-builder

Getting Started

CDN

// with html
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.0.5/dist/cdn/material-dynamic-colors.min.js"></script>

// with javascript
import "https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.0.5/dist/cdn/material-dynamic-colors.min.js";

NPM

// installing
npm i material-dynamic-colors

// importing as window.materialDynamicColors
import "material-dynamic-colors";

// importing as materialDynamicColors
import materialDynamicColors from "material-dynamic-colors";

How to use it?

let colors = await materialDynamicColors(source);

// from color
let colors = await materialDynamicColors("#ffd700");

// from path
let colors = await materialDynamicColors("/image.png");

// from url (caution with cors errors)
let colors = await materialDynamicColors("http://domain.com/image.png");

// from file
let fromFile = document.query("input[type='file']").files[0];
let colors = await materialDynamicColors(file);

// from blob
let fromBlob = new Blob();
let colors = await materialDynamicColors(blob);

Returned object

{
   light:{
      primary: string,
      onPrimary: string,
      primaryContainer: string,
      onPrimaryContainer: string,
      secondary: string,
      onSecondary: string,
      secondaryContainer: string,
      onSecondaryContainer: string,
      tertiary: string,
      onTertiary: string,
      tertiaryContainer: string,
      onTertiaryContainer: string,
      error: string,
      onError: string,
      errorContainer: string,
      onErrorContainer: string,
      background: string,
      onBackground: string,
      surface: string,
      onSurface: string,
      surfaceVariant: string,
      onSurfaceVariant: string,
      outline: string,
      outlineVariant: string,
      shadow: string,
      scrim: string,
      inverseSurface: string,
      inverseOnSurface: string,
      inversePrimary: string,
      surfaceDim: string,
      surfaceBright: string,
      surfaceContainerLowest: string,
      surfaceContainerLow: string,
      surfaceContainer: string,
      surfaceContainerHigh: string,
      surfaceContainerHighest: string
      },
   dark:{
      primary: string,
      onPrimary: string,
      primaryContainer: string,
      onPrimaryContainer: string,
      secondary: string,
      onSecondary: string,
      secondaryContainer: string,
      onSecondaryContainer: string,
      tertiary: string,
      onTertiary: string,
      tertiaryContainer: string,
      onTertiaryContainer: string,
      error: string,
      onError: string,
      errorContainer: string,
      onErrorContainer: string,
      background: string,
      onBackground: string,
      surface: string,
      onSurface: string,
      surfaceVariant: string,
      onSurfaceVariant: string,
      outline: string,
      outlineVariant: string,
      shadow: string,
      scrim: string,
      inverseSurface: string,
      inverseOnSurface: string,
      inversePrimary: string,
      surfaceDim: string,
      surfaceBright: string,
      surfaceContainerLowest: string,
      surfaceContainerLow: string,
      surfaceContainer: string,
      surfaceContainerHigh: string,
      surfaceContainerHighest: string
      }
}

License

MIT

Thank you!