-
Notifications
You must be signed in to change notification settings - Fork 92
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
Comments
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}};
} |
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). |
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
|
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:
Thank you.
The text was updated successfully, but these errors were encountered: