Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

giving color as input to css class without using style tag

Avatar

Level 3

How can I use style="color:${properties.color @ context='styleToken'}" in pure css class as I wanted to give different colors as input at different times.

11 Replies

Avatar

Employee Advisor

Hi @SahrudayaB 

You can create different classes for each color in css file for eg :

.color-green{
    color: green;
}

.color-blue{
    color: blue;
}

and use those classes based on condition in sightly for eg :

<div class="color-${properties.color}">


Thanks.

Avatar

Level 3

but ${properties.color @ context='styleToken'} returns rgb value. In that case how can I give that value 

Avatar

Community Advisor

How are you allowing your content author's to choose the colors?

Avatar

Level 3

from dialog box they'll choose the colors by changing rgb values

Avatar

Employee Advisor

Hi @SahrudayaB ,

 

Are you authoring and storing RGB values separately (in 3 diff properties)?

Avatar

Level 3

No. I just used "granite/ui/components/coral/foundation/form/colorfield" sling resource type.

Here is what I got.

SahrudayaB_0-1644316950719.png

And then I'm giving ${properties.color} in style tag. It is applying when it is used for text but I want to use it to change the colors of range slider track and thumb.

Avatar

Employee Advisor

@SahrudayaB , 

the text use the property as color

color: rgb(x, y, z);


while the slider thumb & track uses the property background-color

background-color: rgb(x, y, z);

 Please update the inline styles accordingly.

Thanks.

Avatar

Level 3

Yes, I did but it's not getting applied since I'm using  input[type='range']::-webkit-slider-runnable-track  and input[type='range']::-webkit-slider-thumb in css to range slider track and thumb. 

Avatar

Employee Advisor

@SahrudayaB do you mind posting the relevant html and css code ? So I can have a better look.

Avatar

Level 3

I have followed the same but I want content authors to choose colors for range slider track and thumb from dialog box. Even if I add style tag in html to apply the color, it's not applying.