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.

Not fully following, scss variables cannot be changed at runtime — Shanon Jackson
– Shanon Jackson, Commented Jul 2, 2019 at 0:11

Shanon Jackson · Accepted Answer · 2019-07-02 01:07:17Z

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-CtYMTKk3hKLzkBuFFXg5D4AFZ0suSsJDi1hPO8oTUugDKspg7EwLyxMEsK1TbVKpc9QqzQwD4BgUGGABZMhHH+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-xPC1BvJINglkemgxGHwf4dBJC1hYFsOKLEABEKJXmgWaEIfIw8rDQAAKIADkAAi0BuKdSifUAFnVgWjA8qMbiZCgUtDaB7IAA

edited Jul 2, 2019 at 1:07

answered Jul 2, 2019 at 0:13

Shanon Jackson

6,6511 gold badge26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

bluePearl Over a year ago

how can use css variables to solve the problem? I tried declaring my variable as so: --bkg-color: #ffffff an in my code if i do have a background color value then i document.body.style.setProperty('--bkg-color', pageDetails.backgroundColor) but that didn't seem to work.

Shanon Jackson Over a year ago

Iv'e added a edit with a working fiddle to show how to change css variables at runtime.

bluePearl Over a year ago

Thanks for the demo - i realized i didn't have :root and needed to a # tag before my string value. Also would i still be able to use: styleName: lighten(var(--class-color), 20%);

Shanon Jackson Over a year ago

No you wont as lighten only exists at compile-time unfortunatly :( you can however use a javascript implementation of lighten/darken

Shanon Jackson Over a year ago

Added a final edit with a javascipt implementation for scale-color in typescript

|

Collectives™ on Stack Overflow

Assign color value to css variables

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related