Best way to dynamically change theme of my Vue.js SPA?

Finally, after a few long days I came up with a solution that I think is both easy to implement and very very lightweight.

CSS VARIABLES

Before searching up a lot, I didn't even know the existance of these kind of variables and they don't seem so used. Anyway, I hope this can help someone out there seeking my same answer:

<template  <app-main></app-main>  <app-sidebar></app-sidebar>  ...</template><style>  :root{    --primary-color: #C5C5C5!important;    --secondary-color: #6C7478!important;    --tertiary-color: #FFFFFF!important;    --success-color: #80b855!important;    --warning-color: #eaca44!important;    --error-color: #ef4d4d!important;  }  /* Theming */  header{    background-color: var(--primary-color);  }  div{    color: var(--tetriary-colory);  }  ...  /*   END   */</style><script>  import axios from 'axios' /* all your imports etc. */  export default{    data(){    },    methods: {      axios.post(`http://localhost:8080/foo`).then(function (response){        let bodyStyles = document.body.style;        bodyStyles.setProperty('--primary-color', response.colors[0]);        bodyStyles.setProperty('--tertiary-color', response.colors[1]);        ...      }    }  }</script>

As you can see, I just initialize a few useful CSS variables and when I need them (for example in that api post call) I just modify them using a simple bodyStyles.setProperty('propertyName') function.

I really enjoy this type of setup since I use it in my login page so when a user successfully logs-in I load from the database his own colors and set them up just like that.

Hoping this can help someone! Cheers!