Displaying value of a CSS Variable in Frontend

Issue

I am trying to setup a general Style Guide for my design system. I am using CSS Variables for the defined colors like

:root { --accent: #234a32; --accent-alt:#826284 }

I want to display a square in the frontend where I would use the variable as background color but also display the hexvalue in it in order to be able to copy it.

<div style="background-color: var(--accent)">#234a32</div>

So the question is, how can I get the hexcode (in this case #234a32) dynamically to be displayed.

Solution

You will need to use data-attributes. (unless you wanna do some janky regex to find the var values)

<div
    style="background-color: var(--accent)"
    class="js-populate-var"
    data-var="--accent">
    <p>placeholder</p>
</div>

var els = document.querySelectorAll('.js-populate-var');

els.forEach(el => {
  el.innerHTML = getComputedStyle(el)
    .getPropertyValue(el.dataset.var);
})

https://codepen.io/michaelmano/pen/poRqPVj

Answered By - Michael Mano