How to change the colour of the horizontal-rule using css

What I’m trying to do

Hi, can somebody please tell me which line of the css file of the theme should i edit in order to change the color of the horizontal rule in markdown (i mean the horizontal line that corresponds to typing “----”)

u can use css snippet below. just change #000000 to ur preferred color. in case u r using on top of community theme and it has a custom hr line color, add !important between the color code and the semi colon ; i.e. #000000 !important;

the hr seems repeated in the css below because of reading view and editing view

to apply the css snippet, refer to link to obsidian help below (basically u need to save this in a text file with .css extension and save it in .obsidian/snippets folder.

.markdown-preview-view hr, hr {
	border-color: #000000;
}
1 Like

Solved. Thanks a lot! :blush::blush:
Edit-1: It works perfectly in preview mode. But it doesn’t change the line color in live-preview mode. Can something be done to change it in the live preview mode as well?
Edit-2: Figured out how to do it in live preview. It’s just that .markdown-preview-view should be replaced with is.live.preview :

.is-live-preview hr {
  border-color: #FFFFFF !important;
}
1 Like

In Obsidian v.0.13.30, the following appears to work:

/* HR Horizontal Rule LIVE PREVIEW */
.markdown-source-view.mod-cm6 hr {
  border-top: 1px solid;
  border-color: #499dce;
}

/* HR Horizontal Rule READING VIEW */
.markdown-preview-view hr {
  border-top: 1px solid;
  border-color: #499dce;
}

Angel

3 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.