Support for custom colors for different components

[AyushSehrawat]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I want to suggest an idea and checked that ...

• ... to my best knowledge, my idea wouldn't break something for other users
• ... the documentation does not mention anything about my idea
• ... there are no open or closed issues that are related to my idea

Description

Hi! I would like if you were to add some option edit the colors of some component, because when i tried with extra.css ( custom stylesheet ), some things didn't work the way i intended, and at some places it wasn't even taking part, like overwritten. Also is there any guide on components you use ? Like md-header, h1,h2,.......

Use Cases

Custom color for better flavouring of website. It will give opportunities to more varieties of themes, instead of being restricted to some few.
Why? Like i added an a:hover and md-nav__link, but it didn't work everywhere. Only at some places.

Screenshots / Mockups

No response

[squidfunk]

Thanks for suggesting. As you have noticed, appearance can be changed and customized with additional CSS. Unfortunately, we can't provide a general web development guide in our documentation, detailing for every component how to override it. This is out-of-scope for the project. I'm converting this to a discussion. Feel free to share what you tried, maybe somebody can help 😊

[AyushSehrawat]

@squidfunk is it possible to get some name of core component like just links, text because the extra.css only seems to edit the middle component of screen, i.e the one with content. Not the side bars on each side (If enabled). Some quick guide to tweak them would be helpful.

[squidfunk]

You can edit everything with additional CSS, not only the content. If we would start a guide, people would be asking for more and more guidance on each and every component. I recommend searching the issue tracker and discussion board for customizations.

[AyushSehrawat]

Oh i can see that coming if you start a guide... I will look through them! Thank you :)

[AyushSehrawat]

I was trying to implement some colors of https://github.com/catppuccin/catppuccin.. Though failed to edit background color because for some weird reasons, it showed shadow under heading of sidebars

[squidfunk]

For colors, see our custom colors guide and color definitions:

:root > * {
  --md-primary-fg-color:        #EE0F0F;
  --md-primary-fg-color--light: #ECB7B7;
  --md-primary-fg-color--dark:  #90030C;
}

[AyushSehrawat]

This would be enough for my use case. Thanks a lot.