Higher contrast accent color in both light and dark modes (CSS snippet)

Share & showcase
1

It’s hard to find an accent color that has good contrast in both light and dark modes, which is a problem if you change modes on a schedule. This snippet fixes that by making the accent color darker in light mode and lighter in dark mode. Obviously this works best with colors of middle brightness.

The first draft was kindly written by #appearance wizard @Anubis. Discord

Here’s the default accent color (left) with the snippet applied (right):

image
image1920×1280 109 KB

A downside of this snippet is that it reduces contrast in a few places in Settings that use white text atop the accent color in dark mode. This should be fixable but at the moment it’s not worth the effort to me because I don’t spend most of my time in Settings. EDIT: This also affects pop-up messages.

/*
	Increase contrast of accent color by making it darker in light mode and lighter in dark mode.
	
	Bug: Causes contrast problems in a few places that have different-colored text, like buttons.
	
	https://forum.obsidian.md/t/higher-contrast-accent-color-in-both-light-and-dark-modes-css-snippet/46512
	
	First draft kindly provided by #appearance wizard Anubis. https://discord.com/channels/686053708261228577/702656734631821413/1035359453110874212.
*/

body {
	--accent-l-diff: 13%;
}

.theme-light {
	--accent-l-mod: calc(var(--accent-l) - var(--accent-l-diff));
    --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l-mod);
    --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l-mod)); 
	--color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l-mod) + 2.5%));
    --color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l-mod) + 5%));
}
.theme-dark {
	--accent-l-mod: calc(var(--accent-l) + var(--accent-l-diff));
    --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l-mod);
    --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l-mod));
	--color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l-mod) + 2.5%));
    --color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l-mod) + 5%));
}

Reducing --accent-l-diff to 10% or 11% gives a little more contrast against the body text and a little more color in dark mode.

5 Likes
2

This was helpful! My light theme was fine but dark theme with the accent I chose wasn’t and this helped. I just commented out the light section and added to snippets.

Thanks!

1 Like
3

Yay! Yeah, it’s really hard to find an accent color that has enough contrast in both light and dark modes.

1 Like
4

Hi! Thanks for the very useful snippet.

As far as you know, are there any open feature requests to choose two different accent colors for the dark and for the light theme? I believe that would be the best and final solution!

5

Im glad you like it! I don’t remember if there’s a request, but I think there wasn’t (a search will give a more reliable answer).

I agree it would be better to have a setting for each. I think I refrained from posting a request because it seems like even iOS only supports a single accent color for apps in the stuff they give devs to work with. (Which wouldn’t prevent Obsidian’s devs from doing differently since they’re not even using that stuff, it just kind of demoralized me.)

If you post a request, comment here with a link and I’ll be happy to upvote it.

1 Like