Tags Overview Plugin - Darkmode is hard to read

[Obstinate]

I quite like the Tags Overview plugin, but I find it quite unreadable in dark mode.

Tags Overview in darkmode:

I’ve hunted around in my themes sections and played with trying to add some CSS in order to change the colours.
I wish the text box wasn’t white, but I could live with that if I could at least read the text that I typed in.

Any pointers as to how I could make this more readable in darkmode?

[ariehen]

This is what I see on my end using the default theme with the dark color scheme:

More readable compared to your screenshot.

I would switch to the default theme with no CSS snippets enabled and work my way back from there.

[Obstinate]

Thanks for the encouragement in the right direction.

Well, it looks like I shot myself in the foot. Earlier I got some help to brighten up the text in my dark theme and added this in a css file.

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

I’ve split it so that the right is brighter, as I have the Tags Overview plugin on the left.

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

I guess I’ll start poking around trying to figure out how to focus on a single ‘window’ then. This allows the file explorer to be brighter, so I’ll see if I can figure out what the Tags Overview is officially called.

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

[ariehen]

The issue seems to be the * in your snippet(s). That’s saying: apply the color: var(--mono-rgb-100); to everything (within the previous selectors) which includes the “pill tags” with the black text in this case.

You could start with

.theme-dark .workspace-leaf-content[data-type="tags-overview-view"] .header-with-settings .title {
    color: var(--mono-rgb-100);
}

but you may need to add more to it if it doesn’t cover enough.

---

I’m going to move this to the custom CSS category at this point.