Override Theme and add toggle button for different color blindness

[axi0m]

I have created some custom themes that override the hex codes for specific color blindness.

[data-md-color-scheme="custom-protanopia"] {
    --md-primary-fg-color: #002C5C;
    --md-accent-fg-color: #002C5C;
    --md-primary-fg-color--light: #FFFFFF;
    --md-primary-fg-color--dark: #75693a;
}

[data-md-color-scheme="custom-deuteranopia"] {
    --md-primary-fg-color: #002f4f;
    --md-accent-fg-color: #002f4f;
    --md-primary-fg-color--light: #FFFFFF;
    --md-primary-fg-color--dark: #876419;
}

[data-md-color-scheme="custom-tritanopia"] {
    --md-primary-fg-color: #003335;
    --md-accent-fg-color: #003335;
    --md-primary-fg-color--light: #FFFFFF;
    --md-primary-fg-color--dark: #d02221;
}

I appreciate the out of the box dark and light mode, and I can leverage that successfully.

However what I also want is a way to toggle different color themes depending on the user's color blindness. i.e. a drop down menu next to dark/light mode that will show all the themes and allow user to select one.

I defined all the theme color schemes in extra.css successfully, but can I use the Theme Extension (https://squidfunk.github.io/mkdocs-material/customization/#setup-and-theme-structure) to partially override the nav pane to add the menu to select the preferred theme?

[squidfunk]

Yes, you need to override the header.html partial if you want to add new toggles. Alternatively, you can just add your new defined schemes as alternatives to the color palette toggle.

[axi0m]

Thanks! That's what I wanted to confirm, appreciate your quick response.