时间戳

首页 > 解决方案 > 如何在 scss 中实现可切换主题？

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

问题描述

我有一个带有使用语义变量的 scss 文件的现有项目：

$background-color: white;

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

当我向正文添加主题类时，我想将背景更改为黑色：

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

如果我删除课程（或切换到主题灯），则返回白色。

我还没有在 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 变量扩展作为值，即（从上面）：

$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很陌生，所以也许我错过了一些功能..？

标签： csssass

解决方案

可以使用 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类，它将使用为该类定义的变量。否则，它将使用默认的根变量。

推荐阅读