How do I get <hr> to change colour with the dark/light theme?

[riccardo-degasperi]

Hi, first of all thank you for the amazing theme!

Is it possible to add horizontal rules that change colour according to the (dark/light) theme?
I've noticed that hr gives you a dark grey line that does not adapt to the theme.

My hunch is that I need to set the style for hr in _base.scss.
I tried adding hr to the list below (in _base.scss), but nothing happened.

p, h1, h2, h3, h4, h5, h6, em, div, span, strong {
color: var(--global-text-color);
}

I'm sorry if this is a silly question. I am very new to CSS.

Thanks!

[riccardo-degasperi]

Hi, I think I sorted it out.

Adding the following bit to your _base.scss apparently does the trick.

hr {
border-color: var(--global-text-color);
background-color: var(--global-text-color);
color: var(--global-text-color);
}

[riccardo-degasperi]

If you want your hr to match the navigation bar border (which is light grey) when in light mode, then use this bit instead:

hr {
border-color: $grey-color-light;
background-color: $grey-color-light;
color: $grey-color-light;
}

[alshedivat]

Hey @riccardo-degasperi, thanks for figuring out and sharing a solution for this. The dark mode still has some rough edges, which I hope will be addressed in an upcoming release. Cheers!