how to insert secondary, tertiary, and custom color?

[adibi-officeth]

in Inpiut we need to pass secondary, tertiary and custom color.

[leonardorafael]

Hi @adibi-officeth , this lib returns the exactly scheme from https://m3.material.io/styles/color/the-color-system/color-roles. Does not apply it in any html/css, ok?

[patelka2211]

Hey @adibi-officeth , If you wish to utilize the color theme generated by this library, you can make use of my library called DynamicColors. This library offers developer-friendly APIs that allow you to create multiple instances of dynamic color themes.

To begin, let's say you require a dynamic color theme for a section called "gui_1." In that case, you would call the create() API from DynamicColors, providing "gui_1" as the name and your preferred color value as the second argument:

let dc_instance_1 = DynamicColors.create("gui_1", "#0ff0ff");

// Similarly, for another instance:
let dc_instance_2 = DynamicColors.create("gui_2", "#017726");

Once you have created these dynamically generated colors, you can use them in your HTML and CSS as well. For instance, if you assigned the name "gui_1" to one of the DynamicColors instances, you can apply the colors as demonstrated below:

/* If you assigned "gui_1" as the name to one of the DynamicColors instances, you can use the colors as shown below. */

body {
    background-color: var(--gui_1-dc-background);
    color: var(--gui_1-dc-primary);
    /* And so on */
}

Apart from the create() function, DynamicColors offers other APIs as well.

It's worth mentioning that DynamicColors relies on material-dynamic-colors for generating dynamic color themes. Essentially, DynamicColors builds upon the foundation provided by material-dynamic-colors.

Lastly, I would like to extend my gratitude to @leonardorafael for creating such an incredible library like material-dynamic-colors.