Assign color value to css variables

Question

In my css i have several color variables like:

$bkg-color: #ffffff

white is what i want the default color to be but the $bkg-color could also be customized to a different color based on what the user creates and saves. So in my typescript i have:

backgroundColor?: string = '';

my get call response data is set to pageDetails and then i check

if(pageDetails.backgroundColor) { 
this.backgroundColor = pageDetails.backgroundColor; 
}

I cannot directly bind the background color class to the html because my page content is displayed via v-html='displayedHtml'

How can i set $bkg-color: this.backgroundColor (if exists || set default color of white).

i am using vue and typescript

i believe i can set the default like so: $bkg-color: #ffffff !default; but how i can make it assigned based on my data is where i am a bit lost.

Answer 1

How can i set $bkg-color: this.backgroundColor (if exists || set default color of white).

Unfortunately, Scss variables do not exist at runtime, they exist only at compile time and then the python-written compiler replaces them with their value in the css style sheet. If you're not supporting Internet Explorer You can use css variables to solve this problem which can be changed at run time dynamically.

If iv'e misunderstood the question let me know and i'll add an edit.

EDIT: https://jsfiddle.net/njsrLywt/ Here's a demo showing changing css variables at run-time.

EDIT2: You will also no longer be able to use lighten/darken however you can use a javascript implementation of lighten/darken which exists at run-time. Also on a side note you should avoid using lighten/darken in favour of scale-color which allows for better color scaling because it scales the remaining % of 100

EDIT3: Here is a quick implemtation of scale-color implemented with javascript 100% fully immutable FP style use it in the following way

ColorUtils.scaleColor("#294e80", -35);  //darken 35%
ColorUtils.scaleColor("#F6F6F6", 35); // lighten 35%

https://typescript-play.js.org/#code/MYGwhgzhAEDCD2J4CcCqAXAliGBvAUAJATphbDQTBggCmCSy0AvNABTCIoAStAHgC5K6ZJgB2AcwA00AA61kwWmPRCxAVwC2AIwUBKFgD5oBQoQD0AKmiZ0AchgALMMgAm0dPGgSvAM2TwmtCO-NAAtMaOECDQYMDA6shktCAAnpRemN5+AUEhfOHGyBLahdBitADu0NwAygAyZfnQluZEhJxiJNAASgDiAEIswfwAKvA9JRxcyLx8egDc7Zi+7P1DzJvl6iAgBsi06Ili0JyMc0tmnd0A2o4yEDIgALrDxdoATFEgbDfrAHTIGQA6S9Qb-bTPRbLVZseSKZToaDGAAMBlMV3gXSRFUq9UwEkc6AqUGGMQA1OwAIwolHhaB7FrseFKFTQczQGloy5mA5HZAnb7jOZse6UGS4-GE4m0KDQswAXxhzIUrKRAB5oGiTO0OljupKCUSSTBWBSGUy4arEezObT5bzDsdgtFhfxRQ8JVUpcbZRAHUrHfyTmcePxLgqlkr8OYOc0ItB3k1ok1+Phrkj8uNJqVWKL+EISKJJAZmMZTBnKI4UOhnGJXD1aBJQqxzAA9ADEAH5fmAwr4ADquKG9-tDkc3PuD4d6AAk5kwSyIldxc2G+UBtFk4CUbAg1eQtbA9cbzb4MjYmkLInEoOQ1+LoIkD9vMm0L5LRh1QedTEpf+8aBKQkIDoFKSltAjaFl31JEDggHYkVbTse0nMdh1wD4FT0Udp2eTDsNw8cCLnBd-n4WhgDYVd+HlPlf1lRD2i7b9eSEWQXAgWgAEkVDYeDEJuKlnhkKkADY9CkXVnzkTieL4gSQHQG4PhEzkJKksxCHfWTkC43j0H4xilJuABmNTxL0dpA0INQdhAKMl0rd4vhTPN3gAQWQe9oBuDQdAUCUtF0IFtgC5AoS-CtYMTKk3hKLzkBuFFXg5D4AFZ0suSsJDi1hPO8oTU ugDKspg7EwLyxMEsK1TbVKpc9QqzQwD4BgUGGABZMhHH+Fq+H4qkZFyt8qXlStNHEdqmFYbraz68RBuGobKugprukaPN+um0DJrEaaDDSxrK2oEAEnAdBaG4YY2FLctlUvVqds2Vg9oOxMnQFLUeRWdhkDyrZtpmfZPpONhcvpbQxttR62pmek3uBn7YQhl7oCBxgQeDEr-jpSk2Ch+l-sO9gMY6sJ0ampH2nor6ABZcdAwb6VyknYZ2inEcxiNjpi07zuSWobru1jfvZ+G0a5lAsedFFkfYRpNRRf50vRXVabBsmmE5qnMZhrXdt16WeRsjXSae+Gdf24GYY+RnOYtxgEaN5B5UjfByu6XxxBoa7WH5nZkm4W6mTEuXPaRb2xBoIX-ZoAXLtqEPrC5bKYqjmhNugRoU9pRqxYzkBrqVtWfy+m5C+uylTLDmRC9qOufZAepngjIgzYrpvuEb6OQAb6BC5bxyPcrIV4DXPNHDs8KHmnkKnjn-Qoojmp11tGvw-WpFY8oW1U5XrOYg5feiDF00tm1DEzYAAw7WdcE8EV6j0BV78f91n9fh-x4-l-r7ble3B1C0A+EmPMshF6hQAI6QJkKoMKIURYYkrEpAAWgoLwrANRamgCxJElI4pCHQDyHK6AADyFQyToHQQEZEnJcEMmoRg+khDGE0PgPLcG5DKGajihyCSH1sayCZlA+ksgDDWDEkyCQ3DaCcJkRQ2g0BeH1Rll9KB8jZHKJKuvNRJxhH41ERTcRloPjrxZrIiR0AxI8jNrIHmHst7lCqAARWGIrLUKsGE52pKBWoBghCNEpELCmPjahpwqriAACsMMx1hGgU1xC4iJ3QZo1GAaAqY0SvSVBcTIKu9COSmXGjFECrAgEgPeNRKoUScl5JqCUiquZ0mVKyTUup+SWG6MuDfO+38RSuy-u-AaEgX5vx-gNbQf9h7phisMm6ggEFLzLN+UeLZoBzV6gEdQ9Y2AFGsKVPQ-xPC1Bv JINglkemgxGHwf4dBJC1hYFsOKLEABEKJXmgWaEIfIw8rDQAAKIADkAAi0BuKdSifUAFnVgWjA8qMbiZCgUtDaB7IAA