Importing/toggling values for scss color variables based on JS logic

Hi, I’m using vue single file components and trying to implement a dark/light theme toggle. To solve this I have a simple scss file that sets the variables. When importing it directly into the style tag, it works alright. Everything compiles and I’m good to go.

However, if I import in the script section, I no longer have access to the sass variables in the style tag, which makes sense, I suppose. But short of putting all styles in an external scss file, compiling it down to a light and dark css, and importing those via JS, I’m at a loss for how to handle this using vue SFCs. My only current solution is SFC + css.

Here’s a simple example:

test.vue

<template>
    <div>
        <div class="test">test</div>
    </div>
</template>

<script>
    import "sharedStyles/frameworkV2/themes/_palette-light.scss";
    export default {
        
    };
</script>

<style scoped lang="scss">
    .test {
              color: $palette-dark;
          }
</style>

_palette-light.scss

$palette-dark: black

My latest thought, which obviously didn’t work out, is to have a global mixin that handles the importing via javascript if the theme is set. This initial test was just to play with one to see if it’ll work.

does anyone have any ideas?