Css to change the font color/background of editing toolbar(it’s a plugin)

I use the theme for obsidian called ultra lobster and I really like it, but I have a plugin with a toolbar (name: editing toolbar) and the theme completely ignores its existence, as a result it has white font on a very light theme background so nothing is visible

Is there any way for me to fix this using Css?

Ideally, it would be better to change the background color and add boarders to emphasize the toolbar.

But at least making its symbols a different, darker color would also work

I don’t use the theme or plugin, but I see what you mean.

Without digging into the theme to see what’s going on, you could try this:

.theme-light .cMenuToolbarDefaultAesthetic {
    background-color: #ffc04d !important;
}

This will only change the color in the light color scheme. Dark looks fine and is untouched from the default. Hopefully you can find a good color. :smiley:


You could add this in to change the svg (icon) color:

#cMenuToolbarModalBar.top :is(.cMenuToolbarCommandItem, button[class^=cMenuToolbarCommandsubItem]):not(.cMenuToolbar-Divider-Line), :is(#cMenuToolbarModalBar, #cMenuToolbarPopoverBar) button[class^=cMenuToolbarCommandsubItem]>.subitem svg {
    color: var(--font-text) !important;
}

1 Like

Thanks a lot!!

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