Custom color names?

[wilhelmer]

Not sure if this has been asked before – I found similar discussions, but none with this particular topic.

So we can define custom colors, and we can define custom color schemes. And we can change the primary and accent colors via CSS.

But we can't define custom color names, is that correct? So there's no way to set something like this:

theme:
  palette:
    primary: mycustomcolor

Which would allow changing colors dynamically via JS as shown here with the colored buttons.

document.body.setAttribute("data-md-color-primary", "mycustomcolor")

[squidfunk]

Sure, that's possible, too. You basically just need to craft a rule for the data-md-color-primary (or *-accent) selector:

[data-md-color-primary="mycustomcolor"] {
    --md-primary-fg-color: red;
    --md-primary-fg-color--light: green;
    --md-primary-fg-color--dark: blue;
}

Please see the palette folder for all definitions.

[wilhelmer]

Ah perfect, that was the missing piece of information. Not sure if that should be added to the official documentation, but at least it's now documented here for future generations 😁 Thanks!