Confused about adding custom css

[nicktc1]

Hi All. So I'm want to add some custom styles around hr elements to my vitepress pages. The docs here state I should update the /theme/index.js file. The only such folder I see is in /vitepress/template/.vitepress/theme, so I assume that's the place.

index.js here has a couple of lines that look similar to the docs:

import type { Theme } from 'vitepress'<% } %>
import './style.css'

and

import DefaultTheme from 'vitepress/theme'
import './style.css'

So...do I comment out those two style.css lines, and replace them with custom.css? And then in that file do I copy all the styles from style.css, then add my hr styles? I'm confused. Thanks.

[brc-dd]

Create those files in your project directory, not inside node_modules. When you initialize, you can choose "Default Theme + Customization". If you didn't choose that, create the files docs/.vitepress/theme/index.js (or index.ts) and docs/.vitepress/theme/style.css. Replace docs with wherever your directory is where you are keeping your .vitepress folder.

Refer the tree shown here - https://vitepress.dev/guide/custom-theme#theme-resolving

[nicktc1]

Thanks! That was my problem. But I'm still not sure how get custom styles to work. I updated the index.js:

import DefaultTheme from 'vitepress/theme'
import './custom.css'
//import './style.css'

then in new file custom.css I have

hr {
    border: 10px solid green;
}

But the site hr tags don't reflect this style. The docs are sparse so any help would be appreciated.

[brc-dd]

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

https://stackblitz.com/edit/vite-ahkcakqb?file=docs/.vitepress/theme/index.ts,docs/.vitepress/theme/custom.css

[nicktc1]

Thanks!