CSS Snippets to modify text colors and not wreck other stuff

I’m running the default theme in dark mode. For the most part I like it. But, the fonts aren’t white in the side menus. They grey is hard to see and I want to make them pop, so I can read them better.

So, I created a CSS Snippet to brighten it up.

.theme-dark { --text-muted: var(--mono-rgb-100); }

It works just fine.

BUT, when I enable this snippet, the dots in my daily journal calendar disappear. They must go black. It is like they’re using some kind of reverse of this colour value or something to come up with the colour they render as. Not sure.

What’s the proper way to brighten up the text in the app side menus without messing other areas that are also using this value. Should I be editing a different CSS value?

--text-muted is used all over the place. I’m surprised you don’t see other places that look off.

That said, this should take care of the calendar dots where you have daily notes:

.theme-dark #calendar-container {
    --color-dot: var(--color-orange);
}

https://github.com/liamcain/obsidian-calendar-plugin#customization

Screenshot 2023-09-27 073205


To use your var(--mono-rgb-100) for both sidebars, something like this might work:

.theme-dark .workspace-split:is(.mod-left-split, .mod-right-split) * {
    color: var(--mono-rgb-100);
}

or only in the files tab, etc.

.theme-dark .workspace-leaf-content[data-type="file-explorer"] * {
    color: var(--mono-rgb-100);
}
2 Likes

Perfect!
And orange dots in the calendar, awesome! Matched my orange color theme dead on.

Thanks for this, helps so much.

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