Seting custom hex colour for header / links / other components

[axsaucedo]

Edit: I have managed to do this without many changes and with good enough results - posting results in comment below.

Before anything thank you for the great project. Following from the discussion on #66, this issue is primarily to explore the options and documentation that could be available to extend the current base colours provided.

The context is the following: Currently the colours provided are quite good, however it would be quite useful if there can be a way to provide a custom HEX to override the colours as opposed to these just being the avialable palettes. Specifically for us, the red goes very well with the theme of the brand of the project, but it does become a bit too much for the eyes. We would be keen to change the tone to make the red darker - we have been refraining ourselves from jumping into the CSS overrides as we wanted to ask here first for both roadmap question and best practice on overriding, as in the ideal world we would also like to take a step further and also have a different colour (non-red) for links.

My questions for this are:

1. Is there currently a way to override these in a modular way?
2. If not, is there a best practice in how this shoudl be done via CSS overrides (eg the relevant classes, etc) - perhaps the best answer is just to document this instead of doing the full CSS re-write
3. are there any plans/ thoughts of making this an extensible feature (I can see that in Hex colors not supported for color_primary and color_accent #66 it was mentioned that this may encompass an entire re-write of CSS so may not be desirable)

Thank you.

[axsaucedo]

I have been able to do this with a relatively simple solution. I think this could be added for people to follow to implement their own themes, and potentially it could even be extended to provide a simple way to enable users to override these high level colours without too much complexity.

You can find the css override file below - I have replaced the colors with placeholders that can be then replaced with either manually added or dynamic values:

@media (max-width: 1200px) {
.md-header-nav__button {
    color: {{NAV_BUTTON_COLOR}};
    background-color: {{NAV_BUTTON_BG_COLOR}} !important;
    border-radius: 5px;
}
}

h1, h2, h3, h4, h5, h6 {
    color: {{MAIN_TEXT_COLOR}} !important;
}

/* Container backgrounds */
.md-container, .md-main, .md-nav, .md-nav__list {
    background-color: {{MAIN_BG_COLOR}} !important;
    color: {{MAIN_TEXT_COLOR}};
}

.md-header, .md-tabs {
    background-color: {{MAIN_BG_COLOR}} !important;
}

/* Code blocks */
pre, code, .md-source {
    background-color: {{MAIN_CODE_BG_COLOR}} !important;
    color: {{MAIN_CODE_BG_COLOR}} !important;
}

/* All links */
a {
    color: {{MAIN_LINK_COLOR}};
}
a:hover {
    color: {{MAIN_LINK_COLOR_HOVER}};
}

/* Side Menu Links */
.md-nav__item a {
    color: {{SIDE_MENU_LINK_COLOR}};
}
.md-nav__item a:hover {
    color: {{SIDE_MENU_LINK_COLOR_HOVER}};
}

[bashtage]

The base (material mkdocs) uses precomputed colors, so I've stayed with those. Someday I will incorporate the sass files which would make adding custom colors a bit easier (although not trivial).

[zMartini]

Thank you! This is a great theme and adapting some colors was exactly I was looking for.

I guess, the second occurrence of MAIN_CODE_BG_COLOR should be MAIN_CODE_COLOR to keep the code still visible ;-)

/* Code blocks */
pre, code, .md-source {
    background-color: {{MAIN_CODE_BG_COLOR}} !important;
    color: {{MAIN_CODE_COLOR}} !important;
}

instead of

/* Code blocks */
pre, code, .md-source {
background-color: {{MAIN_CODE_BG_COLOR}} !important;
color: {{MAIN_CODE_BG_COLOR}} !important;
}