Change App Theme during runtime using Vue

Question

I have a Vue Js app (V2) which has a structure like so (shortened to focus on issue):

_variables.scss

$brand-theme:#F5F5F5

and loaded via sass loader as so in the vue.config.js

@import "@/assets/scss/_variables.scss";

As a result, in my various Vue components I can reference like so (this is being used in a few Vue files, not just App.Vue for example)

  .button {
    width: 100%;
    text-align: center;
    background: $brand-theme;
    ....

I have a requirement, where i need to inspect the URL, and change this value during runtime prior to rendering, by either manipulating the dom for example or another effective approach.

After some initial research, I am finding using this current structure problematic, and is leading me to re-think the approach, but I'm interested to find out if there's a way to do this with minimal code changes as is.

Thanks in advance.

Answer 1

Assign the value to a CSS variable, on the #app element:

<style lang="scss">
  #app {
    --brand-theme: $brand-theme;
  }
</style>

In any component:

<style>
  .button {
    background-color: var(--brand-theme);
  }
</style>

Changing the value of --brand-theme variable at runtime on either the #app element or any of its descendants, will affect that element and any children reading var(--brand-theme).

Changing the value of a CSS variable from JS is easy:

document.querySelector('#app').style.setProperty('--brand-theme', newValue);
// or, on <div id="app" ref="myApp">
this.$refs['myApp'].style.setProperty('--brand-theme', newValue);

And you can also use this syntax:

<div :style="{ '--brand-theme': dataDrivenValue }" />