@dannytaurus said in Multiple Styles for Controls?:
Create multiple LAFs, one for each control style, then apply them to different controls based on their ID. If you stick to a convention of IDs it's very quick and easy.
..this works but I do something a bit more flexible, for buttons at least - I use the text area to define the style...
so the json for a button I want to have the "Flat style" looks like this:
[
{
"type": "ScriptButton",
"id": "PadEditSelector",
"x": 170.0,
"y": 30.0,
"parentComponent": "EditPanel",
"radioGroup": 51.0,
"text": "FLAT:Edit Pad"
}
]
..and in the interface looks like this

There's a giant loop thru all components in theLAF.js and the relevant bit is:
const var allComponents = Content.getAllComponents("");
for (c in allComponents)
{
if(c.get("text").contains("FLAT"))
{
c.setLocalLookAndFeel(flatButtonLAF);
continue;
};
}
and the LAF itself looks like this:
const var flatButtonLAF = Content.createLocalLookAndFeel();
flatButtonLAF.registerFunction("drawToggleButton", function(g, obj)
{
var a = obj.area;
g.setFont(SkinSpace.skin.stdFont, 16);
// get the text out..
var ffText = obj.text;
var fftextStart = ffText.indexOf(":");
ffText = ffText.substring(fftextStart+1,ffText.length);
//Console.print("drawing flat:" + ffText);
var fillColour = SkinSpace.skin.highlight;
var TextOnColour = SkinSpace.skin.outline;
var hoverOnColour;
//var cThisColour;
if(obj.value)
{
g.setColour(fillColour);
g.fillRoundedRectangle(a, 0);
g.setColour(SkinSpace.skin.highlightContrast);
}else{
g.setColour(SkinSpace.skin.stdText);
}
if(obj.over)
{
g.setColour(SkinSpace.skin.Over);
g.fillRoundedRectangle(a, 0);
g.setColour(SkinSpace.skin.highlightContrast);
};
//g.setColour(SkinSpace.skin.stdText);
g.drawAlignedText(ffText, [a[0],a[1],a[2],a[3]], "centred");
});
..it uses a skin file to set the colours...