在 Nuxt 颜色模式下使用 SCSS 变量答案

【问题标题】：Using SCSS variables with Nuxt color mode在 Nuxt 颜色模式下使用 SCSS 变量
【发布时间】：2020-12-23 21:08:36
【问题描述】：

我正在尝试将 Nuxt 颜色模式与我现有的 SCSS 样式表一起使用。到目前为止，我已经为整个应用程序中的所有颜色使用了 $primary 和 $secondary 等变量。我想使用nuxt颜色模式来改变主题。示例here 显示了一组 CSS 变量，这些变量根据 html 元素的类而变化，例如(.dark-mode, .light-mode)

如何使用 SCSS 应用此逻辑（根据 html 元素的类更改颜色变量）？

我试过了：

.light-mode {
    $primary: #196b69;
    $accent: #e69496;
    ...
}
.dark-mode {
    $primary: red;
    $accent: blue;
    ...
}

还有一点：

$themes: (
    light-mode: (
        primary: #196b69,
        accent: #e69496,
        ...
    ),
    dark-mode: (
        primary: red,
        accent: blue,
        ...
    )
);

但它没有奏效。在此先感谢您提供的任何帮助或对有用文档的参考！ :)

【问题讨论】：

标签： vue.js sass nuxt.js

【解决方案1】：

.light-mode {
    --primary: #196b69;
    --accent: #e69496;
    ...
}
.dark-mode {
    --primary: red;
    --accent: blue;
    ...
}
$primary: var(--primary);
$accent: var(--accent);

工作，除了我在哪里实现了transparentize($color,$opacity)。我的解决方法是使用opacity 作为单独的规则。

_{代表 OP 添加}

【讨论】：