Question

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

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

但是它没有用。在此先感谢您的帮助或对有用文档的引用！：）

Answer 1

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

有效，除了我在transparentize($color,$opacity)实施的任何地方。我的解决方法是改为使用opacity作为单独的规则。

_{代表OP添加了}

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

1 个答案: