This project is based on https://material-foundation.github.io/material-theme-builder
// with html
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/material-dynamic-colors.min.js"></script>
// with javascript
import "https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/material-dynamic-colors.min.js";
// installing
npm i material-dynamic-colors
// importing as window.materialDynamicColors
import "material-dynamic-colors";
// importing as materialDynamicColors
import materialDynamicColors from "material-dynamic-colors";
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);
{
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
}
}