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?
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.
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);
}
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.