Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Seting custom hex colour for header / links / other components #95

Open
axsaucedo opened this issue Feb 21, 2021 · 3 comments
Open

Seting custom hex colour for header / links / other components #95

axsaucedo opened this issue Feb 21, 2021 · 3 comments

Comments

@axsaucedo
Copy link

axsaucedo commented Feb 21, 2021

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
Copy link
Author

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
Copy link
Owner

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
Copy link

zMartini commented Mar 1, 2021

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;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants