Attaching a style property to all (anchor) elements with vue/nuxt

Question

I am working on a website with different categories going to each one of those should change the color of all anchor-elements.

I know I can use style binding like this:

:style="{ color: theColor }"

But then I would have to attach to every link element manually, which seems counterintuitive.

Right now I am getting the color from the store in computed.

<script> 
   computed: {
      theColor() {
         return this.$store.state.theColor;
    }
   }
</script>

And the color itself is hex that I can change from the backend in netlify. So Hardcoding this into seperate classes is not an option.

From intuition I would just iterate through all a elements and give them the color from the store. But how do I do this with vue?

Answer 1

I found a solution using inside and then changing css variables inside :root.

See answer: https://stackoverflow.com/a/50651616/7458669