如何使用 SASS 更改主题

Question

I have a website built on SASS.我有一个基于 SASS 的网站。 There're certain variables I want to change while switching between light and dark themes, but all variables get compiled and converted to its original value.在浅色和深色主题之间切换时，我想更改某些变量，但所有变量都会被编译并转换为其原始值。 Hence, I don't know how to change SASS variables while changing themes.因此，我不知道如何在更改主题时更改 SASS 变量。

Assuming I have following variables in style.scss :假设我在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;

How do I change these variables while switching themes.如何在切换主题时更改这些变量。 I can create two separate css files but that would be redundant code.我可以创建两个单独的 css 文件，但这将是冗余代码。 Can you help me?你能帮助我吗？

Answer 1

Depending on your build process and requirements for older browsers, for example ie11.取决于您的构建过程和旧浏览器的要求，例如 ie11。

Themes becomes easier with css custom properties (css variables).使用 css 自定义属性（css 变量），主题变得更容易。 The basic idea is that you have your variables, and on theme change you change the color of the variables.基本思想是你有你的变量，并且在主题改变时你改变变量的颜色。

In my very very basic example the following things happen and why.在我非常基本的示例中，发生了以下事情以及原因。

On root level set your variables for your default theme.在根级别为默认主题设置变量。
Have a class with the describing the theme, in my example it is .dark-theme有一个描述主题的 class，在我的例子中是.dark-theme
Set a class on the body when dark-theme is active with js, or postback depending on your backend and wanted approach.当深色主题使用 js 激活时，在 body 上设置 class，或者根据您的后端和想要的方法进行回发。 In my example I do it with js.在我的示例中，我使用 js 来完成。

What happens here is that in .dark-theme we change the variables to the dark theme colors.这里发生的是，在.dark-theme中，我们将变量更改为深色主题 colors。 That is the basics of it and will get you far.这是它的基础知识，会让你走得更远。

Just a note, the approach on saving the theme all depends on what kind of site you have SPA, Wordpress, .NET ect.请注意，保存主题的方法都取决于您拥有什么样的站点 SPA、Wordpress、.NET 等。 I seen mentions about saving it in the database and user, that kinda don't hold up if you don't have user signing.我看到提到将它保存在数据库和用户中，如果你没有用户签名，那有点不成立。 One approach is to save it in the browsers local storage and read it when you load the page.一种方法是将其保存在浏览器本地存储中，并在加载页面时读取它。

 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>

Answer 2

use css variables instead of sass one使用 css 变量代替 sass 一个

--mainColor: #eaeaea;

and和

color: var(--mainColor);

to use it使用它

edit:编辑：

to change dynamically css variables动态更改 css 变量

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

if variables was declared on body element如果在 body 元素上声明了变量

Answer 3

You need use javascript to change the theme and a backend language save the user preferences.您需要使用 javascript 更改主题和保存用户偏好的后端语言。 For exemple you can use c#, java or javascript (node.js) to save in a database.例如，您可以使用 c#、java 或 javascript (node.js) 保存在数据库中。 Like you save the Login for user, you need have a value for exemple 0 is white backgroud and 1 is dark.就像您为用户保存登录一样，您需要有一个值，例如 0 是白色背景，1 是深色。

如何使用 SASS 更改主题

问题描述

3 个解决方案

解决方案1
1 已采纳 2020-08-02 11:59:56

解决方案2
0 2020-08-02 11:11:08

解决方案3
-1 2020-08-02 11:46:21

如何使用 SASS 更改主题

问题描述

3 个解决方案

解决方案1 1 已采纳 2020-08-02 11:59:56

解决方案2 0 2020-08-02 11:11:08

解决方案3 -1 2020-08-02 11:46:21

解决方案1
1 已采纳 2020-08-02 11:59:56

解决方案2
0 2020-08-02 11:11:08

解决方案3
-1 2020-08-02 11:46:21