Context Menu Icon Size and Hover Color

I’ve attached a sample that shows increased icon size, custom icon color, and custom icon color on hover. Run the sample and right-click on the button to open the context menu.

Here’s a code snippet from the theme file that shows where I edited the width/height of the icon, the color of the icon, and the hover color of the icon. You can find the full theme file in the sample-it’s called menucolor.theme.


"menu": {
"components": {
"item": {
"components": {
"icon": {
"states": {
"default": {
"properties": {
"width": 100,
"height": 100,
"marginRight": 8,
"scale": true,
"textColor": "#F16513"
},
"styles": {
}
},
"selected": {
"properties": {
"textColor": "#00FF57"
},
"styles": {
}
}
}
}
}
}


I’ve also included screenshots of what the theme looks like in the theme builder.

Note that you will have to edit the JSON text of the theme file manually to add the “width” and “height” properties to the icon- they are not included by default.

-Julie