giving color as input to css class without using style tag | Community
Skip to main content
SahrudayaB
SahrudayaB
Level 2
February 8, 2022

giving color as input to css class without using style tag

  • February 8, 2022
  • 2 replies
  • 2111 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

milind_bachani
Adobe Employee
milind_bachaniAdobe Employee
Adobe Employee
February 8, 2022

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.

    SahrudayaB
    SahrudayaBAuthor
    Level 2
    February 8, 2022

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

      BrianKasingli
      Community Advisor and Adobe Champion
      BrianKasingliCommunity Advisor and Adobe Champion
      Community Advisor and Adobe Champion
      February 8, 2022

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

        Bhuwan_B
        Community Advisor
        Bhuwan_BCommunity Advisor
        Community Advisor
        February 8, 2022

        @sahrudayab Please refer below community thread if that helps:

        https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-change-background-color-for-a-component-using-sightly/m-p/197915

          SahrudayaB
          SahrudayaBAuthor
          Level 2
          February 8, 2022

          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.

            Terms & ConditionsAccessibility statement

            Loading footer...