如何使用 SASS 更改主题答案

【问题标题】：How to change themes using SASS如何使用 SASS 更改主题
【发布时间】：2020-08-02 11:04:27
【问题描述】：

我有一个基于 SASS 的网站。在浅色和深色主题之间切换时，我想更改某些变量，但所有变量都会被编译并转换为其原始值。因此，我不知道如何在更改主题时更改 SASS 变量。

假设我在style.scss 中有以下变量：

$mainColor: #eaeaea;
$secondaryColor: #fff;

$mainText: black;
$secondaryText: #2a3a47;

$borderColor: #c1c1c1;

$themeDotBorder: #24292e;

$previewBg: rgba(251, 249, 243, 0.8);
$previewShadow: #f9ead6;
$buttonColor: #0a0a0a;

如何在切换主题时更改这些变量。我可以创建两个单独的 css 文件，但这将是多余的代码。你能帮帮我吗？

【问题讨论】：

您对浏览器有什么要求？
我希望它适用于所有浏览器
还有 IE11 吗？你在用postcss吗？你对 sass 有什么样的构建过程？

标签： html css sass

【解决方案1】：

取决于您的构建过程和旧浏览器的要求，例如 ie11。

使用 css 自定义属性（css 变量）使主题变得更容易。基本思想是你有你的变量，并且在主题改变时你改变变量的颜色。

在我非常非常基本的示例中，会发生以下事情以及原因。

在根级别为默认主题设置变量。
有一个描述主题的类，在我的例子中是.dark-theme
当深色主题与 js 处于活动状态时，在 body 上设置一个类，或者根据您的后端和想要的方法进行回发。在我的示例中，我使用 js 来实现。

这里发生的情况是，在.dark-theme 中，我们将变量更改为深色主题颜色。这是它的基础知识，会让你走得更远。

请注意，保存主题的方法完全取决于您拥有什么样的网站 SPA、Wordpress、.NET 等。我看到提到将它保存在数据库和用户中，如果你没有用户签名，那有点不成立。一种方法是将其保存在浏览器本地存储中，并在加载页面时读取。

const themeSwitcherButton = document.querySelector('.js-theme-switcher')

themeSwitcherButton.addEventListener('click', function() {
    const body = document.querySelector('body')
  
  if (body.classList.contains('dark-theme')) {
    body.classList.remove('dark-theme')
  } else {
    body.classList.add('dark-theme')
  }
})

:root {
  --primary-color: deepskyblue;
}

body.dark-theme {
  --primary-color: deeppink;
}


.block {
  margin-bottom: 3rem;
  padding: 2rem;
  background-color: var(--primary-color);
}

<body>
  <p class="block">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quos odio atque excepturi, aut voluptate. Similique autem, eos rem cum tenetur perspiciatis voluptatibus reprehenderit cumque, inventore, nam laudantium fugiat molestias eveniet sit commodi deleniti. Ipsa eum animi, excepturi tempore placeat.
  </p>
  
  <button class="js-theme-switcher">Theme switcher</button>
</body>

【讨论】：

谢谢@Dejan，这是一个了不起的方法
我刚刚注意到body.dark-theme { $mainColor: purple; $secondaryText: #fff; } 不起作用。有什么解决办法吗？
@DarioushPD 你使用 scss 变量，你应该使用 css 自定义属性，声明 --secondaryText: #fff

【解决方案2】：

使用 css 变量而不是 sass 变量

--mainColor: #eaeaea;

和

color: var(--mainColor);

使用它

编辑：

动态改变css变量

var bodyStyles = document.body.style;
bodyStyles.setProperty('--mainColor', 'white');

如果变量被声明在 body 元素上

【讨论】：

这并不能回答问题，您只是声明要使用变量，而不是如何实际将其用于主题。此外，您不会问 OP 是否需要浏览器支持，您对不支持它的浏览器的回退是什么？
不是针对你，但你为什么使用 Javascript？
@Dejan.S 我知道类包含变量有更好的方法，但是没有 js 怎么办？
你可以看我的例子。他们为您在此处陈述的演示描述作品的方式，如果您需要在 200 多个类上更改 --mainColor 怎么办？它不会那么好。

【解决方案3】：

您需要使用 javascript 来更改主题和后端语言来保存用户偏好。例如，您可以使用 c#、java 或 javascript (node.js) 保存在数据库中。就像您为用户保存登录一样，您需要有一个值，例如 0 是白色背景，1 是深色。

【讨论】：