0

I have this .scss rule that applies a global dark theme.

#app.dark-theme {
  // LOTS of rules...
}

I've decided that opposite-themed tooltips look better. Instead of dark theme tooltips on dark theme #app, I like light theme tooltips on dark theme #app, and dark theme tooltips on light theme #app.

And here lies the problem... the dark theme rules I've declared are affecting tooltips. I need to somehow make every rule inside #app.dark-theme NOT apply to tooltips. Here's the tooltip selector

// Tippys can be appended anywhere in the dom, including as a direct child
// of <body>, which is the parent of #app.

#app div[data-tippy-root], // add specificity for tippys inside #app
div[data-tippy-root] {
  // tippy css
}

I've tried this How To Isolate a div from public CSS styles?

But it unsets ALL styles. I still want the tippy CSS, and Bulma CSS, to apply to the tooltip. I just don't want my dark theme CSS to affect tooltips.

I've also tried using the :not() selector, but it doesn't seem suited for this use case.

#app.dark-theme :not(div[data-tippy-root]) {
 // of course it's not this easy :)
}
Eric Guan
  • 15,474
  • 8
  • 50
  • 61

1 Answers1

0

Use variables, take a look at an example

:root {
  --primary-color: #24242b;
}

html[data-theme="dark"] {
  --primary-color: #f89898;
}


a {
  color: var(--primary-color);
}
Grzegorz T.
  • 3,903
  • 2
  • 11
  • 24