Multi palettes feature: prototype proposal and example

[FrancoisCapon]

The main idea is to set palettes :

• to sections: the meta of the first page of the section set the section_palette that mean for all pages of the section and subsections
  • subsections as section can override or reset (back to theme) the parent's palette, ...
• to pages: the meta of the page page_palette can set or override his section palette

Here is an example of my proposal with the metas in the top of the page (page_palette == section_palette => palette is defined by section) ; there is a lot of colors in the example ("Christmas garland" effect) but it only to test different cases!

mkdocs-material-palettes-example-site.zip

The implementation of the prototype is "light":

• modification of palette.html to use page.meta.page_palette if exist
• an hooks of 60 lines to handle
  • the palettes of the sections by following the nav structure (once)
  • the palettes of pages (each page)

<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) %}

++  {% if page.meta and page.meta.page_palette %}
++    {% if page.meta.page_palette.primary %}
++      {% set primary = page.meta.page_palette.primary %}
++    {% endif %}
++    {% if page.meta.page_palette.accent %}
++      {% set accent = page.meta.page_palette.accent %}
++    {% elif page.meta.page_palette.primary %}
++      {% set accent = page.meta.page_palette.primary %}
++    {% endif %}
++  {% endif %}

  <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.index0 }}">
  {% if option.toggle %}
  <label class="md-header__button md-icon" title="{{ option.toggle.name }}"
    for="__palette_{{ loop.index % loop.length }}" hidden>
    {% include ".icons/" ~ option.toggle.icon ~ ".svg" %}
  </label>
  {% endif %}
  {% endfor %}
</form>

def on_page_context(context, page, config, nav):
    def do_section_palette(nav):
        def do_section(section):
                try: # section palette is first page palette
                    section.palette = section.children[0].meta['section_palette']
                    if section.palette == 'reset':
                        del(section.children[0].meta['section_palette'])
                        del(section.palette)
                except Exception:
                    try: # section palette is parent palette
                        section.palette = section.parent.palette
                    except Exception:
                        pass
                for item in section.children:
                    if item.is_section:
                        do_section(item)
                    elif item.is_page:
                        do_page(item)
        def do_page(page):
            try: # page palette is section palette
                page.meta['section_palette'] = page.parent.palette
            except Exception:
                pass  
            
        for item in nav:
            if item.is_section:
                do_section(item)
            elif item.is_page:
                do_page(item)
        on_page_context.todo_section_palette = False

    def do_page_palette(page):
        # Post page
        if page.__class__.__name__ == 'Post' :
            try: # page post palette is page view palette
                page.meta['page_palette'] = page.parent.meta['page_palette']
            except Exception:
                pass 
            return
        # other Page
        try:
            page.meta['page_palette']
        except Exception: # page_palette not defined
            try:
                page.meta['page_palette'] = page.meta['section_palette']
            except Exception:
                pass
    
    # do it first and once
    if on_page_context.todo_section_palette:
        do_section_palette(nav)
    
    # do it for each page
    if page.is_page:
        do_page_palette(page)

# must be declared after on_page_context
# but will be exectued before 
# => todo_section_palette executed just once
def on_nav(nav, config, files):
    on_page_context.todo_section_palette = True