Skip to main content
SahrudayaB
SahrudayaB
Level 2
February 8, 2022

giving color as input to css class without using style tag

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.

11 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.

Translate
    SahrudayaB
    SahrudayaBAuthor
    Level 2
    February 8, 2022

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

    Translate
      BrianKasingli
      Adobe Champion and Community Advisor
      BrianKasingliAdobe Champion and Community Advisor
      Adobe Champion and Community Advisor
      February 8, 2022

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

      Translate
        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

        Translate
          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.

          Translate
            Terms & ConditionsAccessibility statement

            Loading footer...