ntno / mkdocs-terminal

monospace theme for MkDocs
https://ntno.github.io/mkdocs-terminal/
MIT License
128 stars 5 forks source link

add color palette toggle #133

Open ntno opened 1 year ago

ntno commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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