This project is based on https://material-foundation.github.io/material-theme-builder
// with html
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>// with javascript
import "https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/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
}
}Do not forget to put your color source between quotes:
material-dynamic-colors "#FF0000"
Generating colors from #FF0000
light theme:
--primary: #C00100;
--on-primary: #FFFFFF;
--primary-container: #FFDAD4;
--on-primary-container: #410000;
--secondary: #775651;
--on-secondary: #FFFFFF;
--secondary-container: #FFDAD4;
--on-secondary-container: #2C1512;
--tertiary: #705C2E;
--on-tertiary: #FFFFFF;
--tertiary-container: #FBDFA6;
--on-tertiary-container: #251A00;
--error: #BA1A1A;
--on-error: #FFFFFF;
--error-container: #FFDAD6;
--on-error-container: #410002;
--background: #FFFBFF;
--on-background: #201A19;
--surface: #FFF8F6;
--on-surface: #201A19;
--surface-variant: #F5DDDA;
--on-surface-variant: #534341;
--outline: #857370;
--outline-variant: #D8C2BE;
--shadow: #000000;
--scrim: #000000;
--inverse-surface: #362F2E;
--inverse-on-surface: #FBEEEC;
--inverse-primary: #FFB4A8;
--surface-dim: #E4D7D5;
--surface-bright: #FFF8F6;
--surface-container-lowest: #FFFFFF;
--surface-container-low: #FEF1EE;
--surface-container: #F8EBE9;
--surface-container-high: #F3E5E3;
--surface-container-highest: #EDE0DD;
dark theme:
--primary: #FFB4A8;
--on-primary: #690100;
--primary-container: #930100;
--on-primary-container: #FFDAD4;
--secondary: #E7BDB6;
--on-secondary: #442925;
--secondary-container: #5D3F3B;
--on-secondary-container: #FFDAD4;
--tertiary: #DEC48C;
--on-tertiary: #3E2E04;
--tertiary-container: #564419;
--on-tertiary-container: #FBDFA6;
--error: #FFB4AB;
--on-error: #690005;
--error-container: #93000A;
--on-error-container: #FFB4AB;
--background: #201A19;
--on-background: #EDE0DD;
--surface: #181211;
--on-surface: #EDE0DD;
--surface-variant: #534341;
--on-surface-variant: #D8C2BE;
--outline: #A08C89;
--outline-variant: #534341;
--shadow: #000000;
--scrim: #000000;
--inverse-surface: #EDE0DD;
--inverse-on-surface: #362F2E;
--inverse-primary: #C00100;
--surface-dim: #181211;
--surface-bright: #3F3736;
--surface-container-lowest: #120D0C;
--surface-container-low: #201A19;
--surface-container: #251E1D;
--surface-container-high: #2F2827;
--surface-container-highest: #3B3332;