gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 12:32:29 24 4
gpt4 key购买 nike

我有一个使用语义变量的 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com