Replicate primary color selector

[keiranmraine]

Either of the following will make me very happy :)

1. There's a plugin that can provide this feature without having to debug.
2. Why the buttons aren't getting the colors.

I'd like to replicate the functionality shown in the documentation that allows the primary color to be updated by clicking the relevant color value, as shown here:

https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#primary-color

I have raided the code source to see how it was done (feel like there's should be a plugin to inject this) and I have the functionality working, but the buttons aren't colored. I removed a couple of lines from the script which related to the code snippet having the value replaced:

<p><em>Click on a tile to change the primary color</em>:</p> <div class=mdx-switch> <button data-md-color-primary=red><code>red</code></button> <button data-md-color-primary=pink><code>pink</code></button> <button data-md-color-primary=purple><code>purple</code></button> <button data-md-color-primary=deep-purple><code>deep purple</code></button> <button data-md-color-primary=indigo><code>indigo</code></button> <button data-md-color-primary=blue><code>blue</code></button> <button data-md-color-primary=light-blue><code>light blue</code></button> <button data-md-color-primary=cyan><code>cyan</code></button> <button data-md-color-primary=teal><code>teal</code></button> <button data-md-color-primary=green><code>green</code></button> <button data-md-color-primary=light-green><code>light green</code></button> <button data-md-color-primary=lime><code>lime</code></button> <button data-md-color-primary=yellow><code>yellow</code></button> <button data-md-color-primary=amber><code>amber</code></button> <button data-md-color-primary=orange><code>orange</code></button> <button data-md-color-primary=deep-orange><code>deep orange</code></button> <button data-md-color-primary=brown><code>brown</code></button> <button data-md-color-primary=grey><code>grey</code></button> <button data-md-color-primary=blue-grey><code>blue grey</code></button> <button data-md-color-primary=black><code>black</code></button> <button data-md-color-primary=white><code>white</code></button> </div> <script>
  var buttons = document.querySelectorAll("button[data-md-color-primary]")
  buttons.forEach(function(button) {
    button.addEventListener("click", function() {
      var attr = this.getAttribute("data-md-color-primary")
      document.body.setAttribute("data-md-color-primary", attr)
    })
  })
</script>

All the colours change, just the bottons not being coloured is the issue.

[squidfunk]

You also need to add the extra CSS, not only the HTML + JS:

.md-typeset .mdx-switch button > code {
    background-color: var(--md-primary-fg-color);
    color: var(--md-primary-bg-color);
}

[keiranmraine]

That works great, is there anyway to make it sticky when you navigate to another page or is this strictly an "in-page" demonstration item that can't be persisted easily?

[squidfunk]

Yes. You need to persist it in local storage or session storage. That's at least how the color palette toggle/selector works.