How to reuse rgb value variable opacity color in React CSS Styled components

Asked Mar 05 '23 at 11:08

Active Mar 05 '23 at 13:33

Viewed 129 times

i know that there are many answers that would perhaps resolve the issue i am having, however, i would love second opinion and possible a clean workaround.

I have simple css color variable in hex/rgba.

--complementary-contrast-alt-1: #4d4d51; (prefered format) or 
--complementary-contrast-alt-1: rgb(78, 78, 81) (alternative format);

So this variable should always be in the same format as it can be replaced from the backend: However, i need to add opacity to it. In a new variable i am implementing:

 --complementary-contrast-1-translucent:  rgba(var(--complementary-contrast-alt-1), 0.9);

The thing is that sadly this wont work unless the main variable is numbers:

 --complementary-contrast-alt-1: 78, 78, 78;

This of coarse raises more issues as the main variable works for my new variable but it does not work for everything else that is also using it.

I am looking for a solution which would not include JS functions. Some sort of work around that would simplify the outcome. Or if there is no way to make it without function, how could that look alike?.

edited Mar 05 '23 at 13:33

asked Mar 05 '23 at 11:08

Siouxx

What do you want exactly? – underflow Mar 05 '23 at 11:16
I need to add opacity to a color in second variable that uses the main variable as reference. – Siouxx Mar 05 '23 at 11:18
Whether the 1st variable is in hex format or rgb, right? – underflow Mar 05 '23 at 11:19
So a general way to do it – underflow Mar 05 '23 at 11:19
hex or rgb yes. – Siouxx Mar 05 '23 at 11:20
1

We can also use RGB values like `rgb(255, 255, 255, .5)` where the last one is for alpha value. Can you get the variable name like this from the backend? @Siouxx – Servesh Chaturvedi Mar 05 '23 at 11:32
I guess that is a valid option. I was focusing on solving in on the frontend purely. – Siouxx Mar 05 '23 at 11:35
Why not have two versions of each color? A hex version and a version that's just the numbers. Then you can use the rgb version when you need transparency. – dantheman Mar 05 '23 at 11:41
It is because, the main variable is dynamic. User should be able, at any point, to change the color. And that is achieved by variable changing value from the backend CMS. – Siouxx Mar 05 '23 at 11:45
1

Then you will need to convert it to rgb in the frontend in order to add transparency. – dantheman Mar 05 '23 at 11:46

How to reuse rgb value variable opacity color in React CSS Styled components

0 Answers0