Within my CSS I define several color variables, such as:
$bkg-color: #ffffff
While white is the default color, $bkg-color can also be customized by the user and saved. In my TypeScript file, I have:
backgroundColor?: string = '';
The data from the GET call is stored in pageDetails, where I check if there is a specific backgroundColor:
if(pageDetails.backgroundColor) {
this.backgroundColor = pageDetails.backgroundColor;
}
Due to the way my page content is displayed using v-html='displayedHtml', I cannot directly bind the background color class in the HTML.
How can I set $bkg-color to this.backgroundColor (if it exists) or else set it to the default of white?
I am working with Vue.js and TypeScript, and while I understand how to set the default color like this: $bkg-color: #ffffff !default;, I am unsure how to dynamically assign it based on my data.