Change Colors of Multiple Objects Efficiently in AppDesigner with Switch

Question

Brianna Billingsley on 29 Mar 2024

1
Link

Direct link to this question

https://in.mathworks.com/matlabcentral/answers/2100726-change-colors-of-multiple-objects-efficiently-in-appdesigner-with-switch

Commented: Toshiaki Takeuchi on 2 Apr 2024

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

0 Comments
Show -2 older commentsHide -2 older comments

Sign in to comment.

Sign in to answer this question.

Answer 1

Adam Danz on 30 Mar 2024

1
Link

Direct link to this answer

https://in.mathworks.com/matlabcentral/answers/2100726-change-colors-of-multiple-objects-efficiently-in-appdesigner-with-switch#answer_1433586

Edited: Adam Danz on 30 Mar 2024

Open in MATLAB Online

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";