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.
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 }" />