Change Colors of Multiple Objects Efficiently in AppDesigner with Switch

Howdy! I'm currently learning the basics of GUI but I'm familiar with matlab. I made a GUI that I want to have two color schemes that change when a switch is hit (like dark mode/light mode). The switch works and the colors change correctly, but my code seems redundant and I'm currently changing each object's background color and font color one by one so adding or removing objects seems like it would be a lot of work to update down the road. I was wondering if there's an easier way to like group all of the relevant objects together so I could say set all of the button background colors at once in a few lines of code. I defined my colors as variables to at least clean it up a little

A condensed portion of my code right now (but imagine many more objects...):

function BoringGrayColors(app)

% Set object colors to default colors

app.IMPORTDATAButton.BackgroundColor = app.defaultBkg;

app.IMPORTDATAButton.FontColor = app.black;

app.EXPORTPNGButton.BackgroundColor = app.defaultBkg;

app.EXPORTPNGButton.FontColor = app.black;

app.UIFigure.Color = app.defaultBkg;

app.HomeTab.BackgroundColor = app.defaultBkg;

% and many more ...

end

Answer 1

[Adam Danz]

Looks like you're creating an exciting custom theme for your app @Brianna Billingsley!

Here are some strategies to reduce the workload you're describing.

1. Apply the same set of colors to all similar objects within a container

If a set of buttons, for example, should all share the same appearance, put them in the same container. Examples of containers are ui panels, button groups, or it can be the entire figure. The nice thing about panels is that you can turn the edges off if you don't want to show the panel frame. Within the callback function, you can find all buttons within the container and apply the color to all buttons in 1 command.

In this example, I get the handles to all buttons in a panel.

allButtons =  findobj(app.Panel.Children,'type','uibutton');

To get the "type" of an object, look at it's Type property: app.Panel.Children(1).Type. Not all objects have a type property.

If the buttons are the only thing in the panel, you can skip using findobj.

allButtons =  app.Panel.Children;

Once you have handles to all buttons, use the set() command to set a color to a property in all of the buttons.

set(allButtons, 'BackgroundColor', app.defaultBkg)

Now, when you add or remove buttons from the container, no need to update the callback code.

2. Find all objects with a specific property and update that property

Let's say you want to update the FontColor of all objects in the app that has a FontColor property. Use findobj and isprop to find all objects in the app that have this property and then update those objects.

appObjects = findobj(app.UIFigure);              % Vector of objects in the figure
hasFontColor = isprop(appObjects, 'FontColor');  % Logical vector
set(appObjects(hasFontColor), 'FontColor', app.black)

3. Avoid creating work - let MATLAB's theme behavior do its job

Let MATLAB do the work for you. If you're using the Beta release (or a future release 😁) the default Theme behavior may already do what you're looking for. For example, I see in your code that you're setting text to black. I presume in dark theme you're setting the text to white. That's what MATLAB's theme behavior already does unless you're overriding that behavior by setting your own colors. When you manually set a color, the theme will not update it. To undo any manually set colors in App Designer, remove the lines that set those colors in the first place and/or set the property's mode to "auto".

For example, app.EXPORTPNGButton.FontColorMode = "auto";

[Brianna Billingsley]

This is exactly what I was looking for, thanks so much! It's not actually light mode/dark mode, I have it set to a cute pink theme and the switch makes it go to "BoringGray" haha. "Boring" gray is the default MATLAB colors, so I'll try setting it to auto :^)

[Adam Danz]

I'd love to see screenshots if you'd like to share them!

[Brianna Billingsley]

Haha, I'm still working on the layout of everything but here's what I have so far (was working on a switch first to practice before I get into the actually important stuff I want the app to do). The app opens with color in "Girlypop mode" and gets offended if you turn it off :)

[Adam Danz]

💯 "Wow, it's like that, huh..."

This is awesome.

Thanks for sharing @Brianna Billingsley

[Mike Croucher]

This is great! Looking forward to seeing what you create @Brianna Billingsley

[Toshiaki Takeuchi]

@Brianna BillingsleyThis is awesome! I would love to share this on LinkedIn. My profile is https://www.linkedin.com/in/toshi/. Please connect.