Pass colors from CSS to Javascript

Question

I am defining my theme colors as variables in my CSS file. Then I want to use the same colors in my JavaScript (it takes values from a database and generates graphs). I do not want to specify the colors again in the JS. Can I load a list of colors from the CSS, and if so, how?

CSS file:

/* http://www.colorhunt.co/c/43601 */
:root{
    --maincolor: #113f67;
    --secondcolor: #34699a;
    --thirdcolor: #408ab4;
    --fourthcolor: #65c6c4; 
}

@Bálint because these are the main colors for the entire site. — Celebrian
– Celebrian, Commented Nov 28, 2016 at 13:34

roberrrt-s · Accepted Answer · 2016-11-28 13:48:00Z

2

Apply the variables to the body, then read out the styles using getComputedStyle

var bodyStyles = window.getComputedStyle(document.body);

This returns an object of all styles defined on the body, now you can retrace it using getPropertyValue

var varName = bodyStyles.getPropertyValue('--var-name');

In which varName now contains your variable, to do this for all colors:

var bodyStyles = window.getComputedStyle(document.body);
var colors = ['--maincolor', '--secondcolor', '--thirdcolor', '--fourthcolor'];
var colorValues = [];

for (var i = 0; i < colors.length; i++) {
    colorValues.push({'name': colors[i], 'hex': bodyStyles.getPropertyValue(colors[i])})
}

edited Nov 28, 2016 at 13:48

answered Nov 28, 2016 at 13:35

roberrrt-s

8,2502 gold badges49 silver badges61 bronze badges

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

1 Comment

Celebrian Over a year ago

I tweaked your solution a bit because I like names more than indices, so ended up using a dictionary instead of a list: colorValues[colors[i]] = bodyStyles.getPropertyValue(colors[i]);

Collectives™ on Stack Overflow

Pass colors from CSS to Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related