Side bar color change!

[MisterKattsu]

Hey! Currently in-the-works of setting up Material. Though I'm currently having an issue thought I'd ask here.

I'm wanting to change the color of the side bar and buttons if possible, I have my colors set, though the don't edit the default color of the side bar. I was wondering if there is a way to change this color in the image below!

[kamilkrzyskow]

Hello,
I'm pretty sure that changing the primary and accent colors as described in https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/ should change the color of that Home navigation link or any buttons from https://squidfunk.github.io/mkdocs-material/reference/buttons/

If not please provide a minimal reproduction: https://squidfunk.github.io/mkdocs-material/guides/creating-a-reproduction/

[kamilkrzyskow]

Then custom CSS is the way to go, I stepped away from the PC for the day, so I can't check the selector to target the Home navigation link for now.

As for the option, I assume you're asking for the button for the experimental category.
This is a custom feature of the Material theme, it might be modified for more public use in the future, if you don't want to wait you can replicate it yourself. It uses a hook that looks for specific text tokens in the Markdown file.
https://github.com/squidfunk/mkdocs-material/blob/master/src/overrides/hooks/shortcodes.py

[MisterKattsu]

Yeah, I added that file into my overrides folder though when I try using one it just doesn't work. Is there anything else I may need to add for it to work?

CC: @squidfunk

[kamilkrzyskow]

I'm sorry for the lack of explanation. You need to add hooks in your mkdocs.yml file https://www.mkdocs.org/user-guide/configuration/#hooks
https://github.com/squidfunk/mkdocs-material/blob/master/mkdocs.yml#L102-L105

Also the icons require more styling changes from the extra CSS file the Material theme uses, the actual file is minified later so you can take a look at the scss file:
https://github.com/squidfunk/mkdocs-material/blob/master/src/overrides/assets/stylesheets/custom/_typeset.scss#L97

[kamilkrzyskow]

It seems the blue comes from setting the primary color to "black" any clue how to customize this? I've tried adding some CSS though it didn't help. Algonside this, any clue how to add the option below?

As for this, I've combined the custom-colors and palette-toggle examples, setting the primary as "black", as you specified.

And indeed it seems that there is an enforced blue tint when using primary "black" with "slate" scheme:

@media screen {
  [data-md-color-scheme="slate"][data-md-color-primary="black"], 
  [data-md-color-scheme="slate"][data-md-color-primary="blue-grey"], 
  [data-md-color-scheme="slate"][data-md-color-primary="grey"], 
  [data-md-color-scheme="slate"][data-md-color-primary="white"] {
    --md-typeset-a-color: #5e8bde;
  }
}

As for the "default" light scheme with primary "black" it also defines a blue color:

[data-md-color-primary="black"] {
  /* ... */
  --md-typeset-a-color: #4051b5;
}

---

So a way to customize this would be this:

[data-md-color-scheme="slate"][data-md-color-primary="black"] {
  --md-typeset-a-color: red; /* or any other hex value */
}
[data-md-color-primary="black"] {
  --md-typeset-a-color: red; /* or any other hex value */
}

When setting colors remember to keep a good contrast ratio: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast
Here is a finished example project after the changes: custom-colors-fro-Kiritsuu.zip

[squidfunk]

@kamilkrzyskow is correct – the indigo-ish tint is the default, which we need to set with higher specificity here:

mkdocs-material/src/templates/assets/stylesheets/palette/_scheme.scss

Lines 129 to 137 in 9b98c77

	// Set neutral colors to indigo
	"grey": hsl(219, 66%, 62%),
	"blue-grey": hsl(219, 66%, 62%),
	"white": hsl(219, 66%, 62%),
	"black": hsl(219, 66%, 62%)
	) {
	[data-md-color-scheme="slate"][data-md-color-primary="#{$name}"] {
	--md-typeset-a-color: #{$color};
	}

@kamilkrzyskow I want to take this opportunity to say: thank you so much for being part of our community experts program. You are doing an absolutely outstanding job! 🙇‍♂️