将 css 变量导入主题的根选择器
Posted
技术标签:
【中文标题】将 css 变量导入主题的根选择器【英文标题】：Importing css variables into root selector for theme 【发布时间】：2021-09-29 16:18:33 【问题描述】：我们有一个基于风格字典的主题引擎。引擎生成每个主题都有一个 :root 元素的 css 文件 - 例如：
:root
--color-100: #161616;
--color-90: #1e1e1e;
// ...
每个主题在单独的文件中都有一组这些变量 - 所以“alpha”主题在一个单独的文件中，“beta”主题在一个单独的文件中，但每个文件结构都是相同的。
在生产版本中，开发人员只包含所需的 css 主题，但是，我们正在构建一个应该能够在所有这些主题之间切换的故事书实例。
我们计划在主题更改时简单地在 html 上设置一个数据属性：
addons.getChannel().on(CURRENT_THEME, theme =>
document.documentElement.setAttribute('theme', theme);
);
这在 html 标记更改为以下内容的意义上是有效的：
<html lang="en" theme="alpha">
（其中主题名称为 alpha）。
在我们的样式中，我们的伪选择器是：
:root[theme='alpha']
// not sure what to put in here
问题是如何将每个 css 文件包含到选择器中，以便我们将数据属性切换到新主题？
我们也用@import/@use 尝试了sass，但由于没有mixin，所以无法加载主题css。
我们也有 postcss 可用，但没有找到任何有用的插件。
【问题讨论】：
【参考方案1】：不确定我是否正确地回答了您的问题，但是您也想切换应用程序的主题，例如它是否为“alpha”，假设它遵循红色和黑色主题，如果它的“beta”假设它遵循蓝色和黑色主题
所以根据我的说法，你可以在你的“alpha 主题”css 文件中提供
:root[theme='alpha']
--color-100: #red;
--color-90: #black;
在测试版中，您可以提供 -
:root[theme='beta']
--color-100: #blue;
--color-90: #black;
在您的一些主 css 文件中，该文件包含您的应用程序的元素选择器，您需要提供如下数据的类
p
color: var(--color-100);
button
color: var(--color-200);
.header
color: var(--color-200);
我希望你能明白我想说的话。不要忘记导入所有的 CSS 模块。如果不是你想要的，请告诉我:)
【讨论】：
谢谢 - 但不幸的是没有。每个主题文件中都有:root ... ，而不是:root[theme='alpha']。我想通过将内容导入该选择器来在主css文件中编写:root[theme='alpha']。
所以你是说你有不同的主题 css 文件，你想要一个 css 文件？对于所有主题？
就像您拥有主题 alpha css、主题 beta css 并且您想拥有 alpha 和 beta 的单个主题文件？这就是你想要的
是的，我们有 alpha.theme.css / beta.theme.css 作为文件。在真实的产品中，永远不会有alpha 和beta 混合在一起（它们是完全分离的产品），所以主题文件只包含主题变量是有道理的，你不需要指定主题 - 只需包含您想要的 css 文件。对于文档，我们希望能够在每个主题之间切换 - 因此数据属性可以切换 css 并导入每个 css 文件。以上是关于将 css 变量导入主题的根选择器的主要内容，如果未能解决你的问题，请参考以下文章
带有 React JS/Polymer 的主题 css 选择器