How to change background color for a component using sightly

[shreyasl9335234]

I have a particular footer component, written in sightly but the background color is hard coded, which i want to make it dynamic. I want to provide the color in the dialog, then value should hold in footer.js file, and write the sightly code to get image value dynamically in my footer.html file

[Feike_Visser1]

You can just replace the background-color with an expression, like : ${properties.backgroundColor}

[smacdonald2008]

Also - if you want to create a color dialog - see: 

http://scottsdigitalcommunity.blogspot.ca/2016/03/how-to-create-aem-touch-ui-color-picker.html

[kautuk_sahni · Accepted solution]

Hi 

You can do it as:

<p> Color : ${properties.color}</p>
<p style="color:${properties.color @ context='styleToken'};"> Text : ${properties.text}</p>

<p> Background Color : ${properties.backgroundColor}</p>
<p style="backgroundColor:${properties.backgroundColor@ context='styleToken'};"> Text : ${properties.text}</p>

<script> var trackingID = "${myTrackingID @ context='scriptString'}"; </script>
<style> a { font-family: "${myFont @ context='styleString'}"; } </style>

Reference article :- https://docs.adobe.com/docs/en/htl/docs/getting-started.html?wcmmode=disabled

I hope this would help you.

~kautuk

[Abhishek_jha65-]

working fine. thanks!!

            <nav style="background-color:${properties.backgroundColor @ context='styleToken'}">