How can I change my accent color when switching between dark and light mode?

Help
1

What I’m trying to do

.theme-light {
–bold-color: #f77331;
–accent-h: blue;
}

This is what i did.

Things I have tried

2

You might want to look at this page: https://docs.obsidian.md/Reference/CSS+variables/Foundations/Colors#Accent+color :blush:

The accent color is actually used/expressed as HSL (Hue - Saturation - Lightness) so blue for --accent-h won’t work…

Something like this could though:

body.theme-light {
    --accent-h: 202;
    --accent-s: 82%;
    --accent-l: 56%;
}

body.theme-dark {
    --accent-h: 314;
    --accent-s: 82%;
    --accent-l: 56%;
}

(This is untested :innocent: )

3

This is how I do it.

/*
	Set accent color in dark mode.
*/

.theme-dark {
	/*#F90 gold*/
	--accent-h: 48!important;
	--accent-s: 100%!important;
	--accent-l: 50%!important; 
}

/* Set dark text on buttons and menu highlights for better contrast. 
Settings sidebar highlight doesn't work yet. */
.theme-dark button.mod-cta,
.theme-dark .vertical-tab-nav-item.is-active {
	color: black;
}

I have also posted a feature request for separate light and dark mode accent color settings. If you’d like to show support for it you can comment on it or press its heart button.

2 Likes