Vue.js 在Nuxt颜色模式下使用SCSS变量

我正在尝试使用Nuxt颜色模式和我现有的SCSS样式表。到目前为止，我已经为整个应用程序中的所有颜色使用了$primary和$secondary等变量。我想用nuxt颜色模式来改变主题。该示例显示了一组CSS变量，这些变量根据html元素的类别而变化，例如（.暗模式、.亮模式）

如何将此逻辑（根据html元素的类更改颜色变量）应用于SCS

我试过这个：

.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,
        ...
    )
);

但它没有起作用。 提前感谢您的帮助或对有用文档的引用！：）

工作，除了我已经实现了透明（$color，$opacity）的地方。我的解决办法将是使用

不透明度

作为单独的规则

代表OP添加

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