css - 如何在 scss 中实现可切换的主题？

我有一个使用语义变量的 scss 文件的现有元素:

$background-color: white;

body {
    background-color: $background-color;
}

当我向主体添加主题类时，我想将背景更改为黑色:

<body class="theme-dark">...</body>

如果我删除类(class)(或切换到主题灯)，则返回白色。
我还没有在 scss 中找到任何轻量级的方法来做到这一点(为每个主题参数化一个类似乎是一种很难维护的方法)。
我找到了一个混合 scss/css-custom 属性解决方案:
原文:

.theme-light {
    --background-color: white;
}

更新(基于 Amar 的回答):

:root {
    --background-color: white;
}
.theme-dark {
    --background-color: black;
}

$background-color: var(--background-color);
body {
    background-color: $background-color;
}

将 scss 变量定义为具有 css-variable 扩展作为值，即(从上面):

$background-color: var(--background-color);

生成以下css:

:root { --background-color: white; }
.theme-dark { --background-color: black; }
body { background-color: var(--background-color); }

这似乎是我们想要的......？
我喜欢它，因为它只需要改变 $background-color 的定义(不是非常大的 scss 文件中的所有用法)，但我不确定这是否是一个合理的解决方案？我对 scss 很陌生，所以也许我错过了一些功能..？

最佳答案

使用 SCSS 执行此操作是可能的，但您必须为要主题化的所有元素添加样式。这是因为 SCSS 是在构建时编译的，您无法使用类切换变量。一个例子是:

$background-color-white: white;
$background-color-black: white;

body {
  background-color: $background-color-white;
}

.something-else {
  background-color: $background-color-white;
}

// Dark theme
body.theme-dark {
  background-color: $background-color-black;

  .something-else {
    background-color: $background-color-black;
  }
}

目前最好的方法是使用 CSS 变量。您可以像这样定义默认变量:

:root {
  --background-color: white;
  --text-color: black;
}

.theme-dark {
  --background-color: black;
  --text-color: white;
}

然后，您可以在元素中使用这些变量，如下所示:

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

如果body元素具有 theme-dark类，它将使用为该类定义的变量。否则，它将使用默认的根变量。

关于css - 如何在 scss 中实现可切换的主题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64390664/

css - 如何在 scss 中实现可切换的主题？

上一篇：amazon-web-services - AWS CDK 中堆栈和构造之间的区别

下一篇：apache-spark - 无法加载 Parquet 文件(不支持 Parquet 类型 : INT32 (UINT_8);) with pyspark