Text Colour for Sidebar

[Karlstens]

Hi all,

Using the default install of Vitepress, I'm needing minor changes made to the colours of various text.

I've had success by adding the following to my /.vitepress/theme/style/customTheme.css file and tying it together into my config.mjs;

.VPNavBar a {
  color: #3c3c3c !important; /* Color on mouse-over */
  ; /* Default color */
}

.VPNavBar a:hover {
  color: #FF0000 !important; /* Color on mouse-over */
}

This successfully set the mouse-over colour to red (for testing, not for looks 😋) of the top Navbar.

But I'm not having the same luck isolating and changing the text of the Sidebar. I've tried .VPSidebar and .VPSidebarItem, but the colour won't budge. As a side note, I'm also lead to believe that the use of !important isn't a wise long term strategy, so will need to address this later.

If anyone can help with addressing this I'd be most grateful - but just as importantly, I have some spare time coming up and would be keen to up-skill in this area, so a link or two to any supporting articles would be welcome.

[Karlstens]

I found this tutorial on how to structure custom .CSS to style Vite Press projects, this looks to solve my question. 🙌🏻

https://adocs.vercel.app/guide.html#custom-css