Material Dynamic Colors

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

Getting Started

CDN

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

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

NPM

1# installing
2npm i material-dynamic-colors

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

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

How to use it?

JS

1let colors = await materialDynamicColors(source);
2
3// from color
4let colors = await materialDynamicColors("#ffd700");
5
6// from path
7let colors = await materialDynamicColors("/image.png");
8
9// from url (caution with cors errors)
10let colors = await materialDynamicColors("http://domain.com/image.png");
11
12// from file
13let fromFile = document.query("input[type='file']").files[0];
14let colors = await materialDynamicColors(file);
15
16// from blob
17let fromBlob = new Blob();
18let colors = await materialDynamicColors(blob);

Returned object

1{
2   light:{
3      primary: string,
4      onPrimary: string,
5      primaryContainer: string,
6      onPrimaryContainer: string,
7      secondary: string,
8      onSecondary: string,
9      secondaryContainer: string,
10      onSecondaryContainer: string,
11      tertiary: string,
12      onTertiary: string,
13      tertiaryContainer: string,
14      onTertiaryContainer: string,
15      error: string,
16      onError: string,
17      errorContainer: string,
18      onErrorContainer: string,
19      background: string,
20      onBackground: string,
21      surface: string,
22      onSurface: string,
23      surfaceVariant: string,
24      onSurfaceVariant: string,
25      outline: string,
26      outlineVariant: string,
27      shadow: string,
28      scrim: string,
29      inverseSurface: string,
30      inverseOnSurface: string,
31      inversePrimary: string,
32      surfaceDim: string,
33      surfaceBright: string,
34      surfaceContainerLowest: string,
35      surfaceContainerLow: string,
36      surfaceContainer: string,
37      surfaceContainerHigh: string,
38      surfaceContainerHighest: string
39      },
40   dark:{
41      primary: string,
42      onPrimary: string,
43      primaryContainer: string,
44      onPrimaryContainer: string,
45      secondary: string,
46      onSecondary: string,
47      secondaryContainer: string,
48      onSecondaryContainer: string,
49      tertiary: string,
50      onTertiary: string,
51      tertiaryContainer: string,
52      onTertiaryContainer: string,
53      error: string,
54      onError: string,
55      errorContainer: string,
56      onErrorContainer: string,
57      background: string,
58      onBackground: string,
59      surface: string,
60      onSurface: string,
61      surfaceVariant: string,
62      onSurfaceVariant: string,
63      outline: string,
64      outlineVariant: string,
65      shadow: string,
66      scrim: string,
67      inverseSurface: string,
68      inverseOnSurface: string,
69      inversePrimary: string,
70      surfaceDim: string,
71      surfaceBright: string,
72      surfaceContainerLowest: string,
73      surfaceContainerLow: string,
74      surfaceContainer: string,
75      surfaceContainerHigh: string,
76      surfaceContainerHighest: string
77      }
78}

CLI

Do not forget to put your color source between quotes:

1material-dynamic-colors "#FF0000"

Output

1
2Generating colors from #FF0000
3
4light theme:
5        --primary: #C00100;
6        --on-primary: #FFFFFF;
7        --primary-container: #FFDAD4;
8        --on-primary-container: #410000;
9        --secondary: #775651;
10        --on-secondary: #FFFFFF;
11        --secondary-container: #FFDAD4;
12        --on-secondary-container: #2C1512;
13        --tertiary: #705C2E;
14        --on-tertiary: #FFFFFF;
15        --tertiary-container: #FBDFA6;
16        --on-tertiary-container: #251A00;
17        --error: #BA1A1A;
18        --on-error: #FFFFFF;
19        --error-container: #FFDAD6;
20        --on-error-container: #410002;
21        --background: #FFFBFF;
22        --on-background: #201A19;
23        --surface: #FFF8F6;
24        --on-surface: #201A19;
25        --surface-variant: #F5DDDA;
26        --on-surface-variant: #534341;
27        --outline: #857370;
28        --outline-variant: #D8C2BE;
29        --shadow: #000000;
30        --scrim: #000000;
31        --inverse-surface: #362F2E;
32        --inverse-on-surface: #FBEEEC;
33        --inverse-primary: #FFB4A8;
34        --surface-dim: #E4D7D5;
35        --surface-bright: #FFF8F6;
36        --surface-container-lowest: #FFFFFF;
37        --surface-container-low: #FEF1EE;
38        --surface-container: #F8EBE9;
39        --surface-container-high: #F3E5E3;
40        --surface-container-highest: #EDE0DD;
41
42dark theme:
43        --primary: #FFB4A8;
44        --on-primary: #690100;
45        --primary-container: #930100;
46        --on-primary-container: #FFDAD4;
47        --secondary: #E7BDB6;
48        --on-secondary: #442925;
49        --secondary-container: #5D3F3B;
50        --on-secondary-container: #FFDAD4;
51        --tertiary: #DEC48C;
52        --on-tertiary: #3E2E04;
53        --tertiary-container: #564419;
54        --on-tertiary-container: #FBDFA6;
55        --error: #FFB4AB;
56        --on-error: #690005;
57        --error-container: #93000A;
58        --on-error-container: #FFB4AB;
59        --background: #201A19;
60        --on-background: #EDE0DD;
61        --surface: #181211;
62        --on-surface: #EDE0DD;
63        --surface-variant: #534341;
64        --on-surface-variant: #D8C2BE;
65        --outline: #A08C89;
66        --outline-variant: #534341;
67        --shadow: #000000;
68        --scrim: #000000;
69        --inverse-surface: #EDE0DD;
70        --inverse-on-surface: #362F2E;
71        --inverse-primary: #C00100;
72        --surface-dim: #181211;
73        --surface-bright: #3F3736;
74        --surface-container-lowest: #120D0C;
75        --surface-container-low: #201A19;
76        --surface-container: #251E1D;
77        --surface-container-high: #2F2827;
78        --surface-container-highest: #3B3332;

License

MIT

Thank you!