Using SCSS variables with Nuxt color mode

Question

I am trying to use Nuxt color mode, with my existing SCSS stylesheets. So far I've used variables like $primary and $secondary for all the colors throughout the app. And I would like to use nuxt color mode to change the theme. The example here shows a set of CSS variables, that change depending on the class of the html element e.g. (.dark-mode, .light-mode)

How can I apply this logic (changing the color variables, depending on the class of the html element) with SCSS?

I tried this:

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

And a little bit of this:

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

But it hasn't worked. Thanks in advance for any help or references to helpful documentation! :)

Unknown Unknown · Accepted Answer · 2020-09-04T20:01:18

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

Works, except for wherever I had transparentize($color,$opacity) implemented. My workaround will be to use opacity as a separate rule instead.

_{Added on behalf of OP}

Using SCSS variables with Nuxt color mode

1 Answers