从全局黑暗主题中排除一些选择器答案

【问题标题】：Exclude some selectors from a global dark theme从全局黑暗主题中排除一些选择器
【发布时间】：2020-06-03 04:48:28
【问题描述】：

我有这个应用全局深色主题的 .scss 规则。

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

我认为相反主题的工具提示看起来更好。我喜欢深色主题#app 上的浅色主题工具提示和浅色主题#app 上的深色主题工具提示，而不是深色主题#app 上的深色主题工具提示。

问题就在这里……我声明的黑暗主题规则正在影响工具提示。我需要以某种方式使#app.dark-theme 中的每条规则都不适用于工具提示。这是工具提示选择器

// 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
}

我试过这个How To Isolate a div from public CSS styles?

但它会取消所有样式。我仍然希望将tippy CSS 和Bulma CSS 应用于工具提示。我只是不希望我的深色主题 CSS 影响工具提示。

我也尝试过使用:not() 选择器，但它似乎不适合这个用例。

#app.dark-theme :not(div[data-tippy-root]) {
 // of course it's not this easy :)
}

【问题讨论】：

标签： css sass tippyjs

【解决方案1】：

使用变量，看看example

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

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


a {
  color: var(--primary-color);
}

【讨论】：