Default dark theme causes issues with custom theme

Here’s my use case. I have two kinds of popovers :

• custom popovers / floating menus, so I want to have control over their look&feel,
• regular tooltips, then I’m fine with default dark theme.

Problem is: some parts of the default dark theme have on effect on my custom tippys.
For example, .tippy-backdrop is not prefixed by .dark-theme so its black background is visible on my custom tippys.

The following CodePen is inspired by the doc, and you can see tomato olor being replace by a dark color : https://codepen.io/anon/pen/MxYerG

Suggestion: make all default CSS dependent of the .dark-theme CSS class.

[atomiks]

I’m not really sure what you’re asking – you need to follow the CSS in the themes section so that the backdrop gets properly styled and doesn’t affect the different color.

.tippy-tooltip.tomato-theme[data-animatefill] {
  background-color: transparent;
}

.tippy-tooltip.tomato-theme .tippy-backdrop {
  background-color: tomato;
}

Edit: ok I understand actually, and I think I agree. I never bothered putting the dark-theme specific CSS underneath the dark-theme name. Not sure if that would be a breaking change since by default the tooltip gets that class name. Although to be fair the only “dark-theme” specific thing there is the background-color. Everything else is the “global CSS” of a tippy that you can override without much issue.

[Semaho]

Ok, maybe I just should have used Popper for the custom one, I came with Tippy first and didn’t think about this solution before now. Thank you for the quick answers 👍