Open ntno opened 1 year ago
{% 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 %}
consider: dropdown of many options or just 2 options (toggle)
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