add color palette toggle

[ntno]

Describe the problem you'd like to have solved

a user of a deployed site has to view the site in whichever palette the site was deployed with. for example if the user prefers to view sites in 'dark mode' they would not get to use the built-in gruvbox dark palette or dark palette if the site was deployed with the default palette.

Describe the ideal solution

a toggle or dropdown option in the theme could allow a site user to dynamically switch to a different palette while viewing the site.

example:
mkdocs-material color palette toggle: https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/?h=light+mode#color-palette-toggle

[ntno]

https://github.com/squidfunk/mkdocs-material/blob/ea9446e6cb181880eceef8e10fc8e75b76a703b7/material/partials/header.html#L36-L52

    {% if config.theme.palette %}
      {% if not config.theme.palette is mapping %}
        <form class="md-header__option" data-md-component="palette">
          {% for option in config.theme.palette %}
            {% set scheme  = option.scheme  | d("default", true) %}
            {% set primary = option.primary | d("indigo", true) %}
            {% set accent  = option.accent  | d("indigo", true) %}
            <input class="md-option" data-md-color-media="{{ option.media }}" data-md-color-scheme="{{ scheme | replace(' ', '-') }}" data-md-color-primary="{{ primary | replace(' ', '-') }}" data-md-color-accent="{{ accent | replace(' ', '-') }}" {% if option.toggle %} aria-label="{{ option.toggle.name }}" {% else %} aria-hidden="true" {% endif %} type="radio" name="__palette" id="__palette_{{ loop.index }}">
            {% if option.toggle %}
              <label class="md-header__button md-icon" title="{{ option.toggle.name }}" for="__palette_{{ loop.index0 or loop.length }}" hidden>
                {% include ".icons/" ~ option.toggle.icon ~ ".svg" %}
              </label>
            {% endif %}
          {% endfor %}
        </form>
      {% endif %}
    {% endif %}

[ntno]

consider:
dropdown of many options or just 2 options (toggle)

[ns-rse]

Many sites seem to load based on the users system theme, would that be possible to implement too?

[mattzcarey]

really keen for this

[ntno]

@ns-rse good idea
@mattzcarey thanks for the feedback; knowing which features people are interested in is helpful

[ntno]

some references for later:

tutorial:
https://whitep4nth3r.com/blog/best-light-dark-mode-theme-toggle-javascript/

mkdocs-material implementation:

• style block: https://github.com/squidfunk/mkdocs-material/blob/master/material/templates/base.html#L46-L53
• script: https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/partials/javascripts/palette.html
• toggle form: https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/partials/palette.html
• not sure: https://github.com/squidfunk/mkdocs-material/blob/master//src/templates/partials/header.html#L75-L85

[ntno]

@ns-rse + @mattzcarey
p.s. let me know if you are interested in making a contribution!