1

Like this

<script>
  data() {
    return {
      themeColor: " #ffffff",
    }
  },
</script>

<style lang="scss" scoped>
$importedColor: themeColor  // javascipt variable


.btn {
  background: $importedColor;
}
.squre {
  border: 1px solid $importedColor;
}
</style>

Either way, I want to be able to choose the theme color in JavaScript.

Is it possible?

HM.Park
  • 757
  • 1
  • 5
  • 9
  • 1
    What if you used CSS variables and used Javascript to update those? https://css-tricks.com/updating-a-css-variable-with-javascript/ – RobertAKARobin Feb 04 '21 at 03:52

2 Answers2

1

It is possible if you create a Sass variable that points to a CSS variable which you then set with JavaScript:

SCSS:

:root {
  --my-custom-color: brown;
}

$importedColor: var(--my-custom-color);

body {
    background-color: $importedColor;
}

JS:

function setBackgroundColor(color) {
    document.documentElement.style.setProperty('--my-custom-color', color);
}

I haven't tested this specific code shown above, but I have done this same type of thing in projects and had it work just fine.

Alexander Nied
  • 12,804
  • 4
  • 25
  • 45
0

I'm not sure, but I read that it is possible in Vue 3 and it's still experimental.

You can do it like this:

<template>
<div class="text">Hello</div>
</template>

<script>
export default{
data(){
   return{
      color: "red"
   }
}
}
</script>

<style vars="{ color }">
.text {
color: var(--color);
}
</style>
Camrado
  • 1