How to Create an App to Select Color Themes

Salman_Dev · September 24, 2020, 5:49am

Hi Everyone, Today I will show you how to make an app for (Select Color Themes) in MIT App Inventor.

The first step you have to do is create a project in the MIT app inventor, if you don't know how to create a project in the MIT app inventor you can see it here :

Okay, if you're done making the project, you can continue in the second stage.

In the second stage, create a screen1 like this with the components shown in the image :

And Block Like this on screen1 :

Okay, if you have finished the second stage, now we will go to the third stage.

In the third stage you have to make Screen2 first, after that create the Components as shown below :

And make the blocks like this on screen2 :

Aia Project :
MyThemes.aia (24.4 KB)

When you've finished creating the project, now you just need to build the app.

Project Results :

Thank you for reading this topic and happy learning.

ChrisWard · September 24, 2020, 11:28am

Hi Salman

The title suggests you are theming the phone when in fact you are theming the current App.

Your code might make use of "any component" loops. You also do not need a ton of 'if-else', instead use a selection index.

Salman_Dev · September 24, 2020, 11:35am

Yes, that's theming the current App.

Salman_Dev · September 24, 2020, 12:32pm

Sorry I still haven't gotten the logic for it , maybe I'll think the logic for it in the second version of that,

But if you have any logic for that please share with me. Thank you

sumo22 · February 19, 2021, 7:36am

Hi everyone,
How to make it global, for all the screens in the app?
I want to make Settings icon on main screen which will open a new screen "settings" and then I wanna chose betwen "light" or "dark". How to do that?

Salman_Dev · February 19, 2021, 8:28am

Hi @sumo22
The project I share in this post already contains screen2 so you just need to learn how this project works on screen2

for that, you can also learn in this tutorial :

Regards,
Salman Dev

sumo22 · February 19, 2021, 4:36pm

Ok, but no information on how to permanently save the color change effect. When I change color and leave the screen and then go back to the same screen, there is no color changing effect. What am I doing wrong?
P.S. I understand that it does not save the effect in TinyDB and does not load this setting from the database later.
I place my blocks.

Salman_Dev · February 20, 2021, 4:45am

I know why the colors are not saved permanently, that's because the tag name in TinyDB GetValue is not same as the tag you StoreValue and in valueIfTagNotThere you have to replace it with Ciemny.

all you have to do is :

call TinyDB1 .GetValue
tag = Kolor Motywu
valueIfTagNotThere = Ciemny

sumo22 · February 20, 2021, 7:42am

Ok, now it's working. But now I want to do the effect in all the screens. How to read the data? I think i need to make global setting from saved result in TinyDB1, and than read data from global. Am I wrong?
I do this in screen "settings":

And read global in another screen:

And it's working on antoher screen But need to add TinyDB and SelectPicker in designer to every screen and make it unvisible.

Can I do it better?
How to set an background image in theme?

Salman_Dev · February 20, 2021, 8:06am

no, you don't need to add SelectPicker on all screens, you only need TinyDB only,
look at this:

sumo22 · February 20, 2021, 10:18am

Oh yeah!!! I made it. But still need to use ListPicker and make it unvisible. I don't know why but it's working.

Edit//
Premature enthusiasm. Everything worked on the emulator. However, after generating the application and installing it on the phone, after changing the theme, it does not change on the main screen, but in the others it does. I know it would be perfect to remove this ListPicker but then even in the emulator changing the theme has no effect. What to change?

edit2//
I finally figured out how to assemble it without a ListPicker, but still the emulator works, and the compiled application doesn't. The theme for the main screen does not change.

edit3//
I know it's weird to write to myself
I removed globals and went back to "selection" in the "settings" screen for "Call Themes Color". The color changes smoothly and the application still works flawlessly in the emulator, however, after compilation, the home screen does not apply the theme change settings.

edit//4
However,
After close the app in task and re-open it the theme settings in home screen is on. How?????

Aarush_Kumar · February 20, 2021, 11:12am

nice guide

sumo22 · February 20, 2021, 6:52pm

What if I want to save the result of the change by pressing the Save button?
What if the procedure for re-opening the application will be connected to the Save button? And how to do this procedure?

Salman_Dev · February 21, 2021, 1:17am

All those things you can make it using the logic from here:

sumo22 · February 21, 2021, 6:30am

edit///
I made it easier. I have added a global "color" to the empty list, which is imported by "selection". When the "Save" button is clicked, the data from SelectPicker is sent to the database - "selection" and at the same time we open a new screen (Screen1) if "true" and close the current screen. This gives the desired effect of changing the theme even in Screen1.
Settings blocks:

The problem appears on Screen1 when we want to shut down the application. When you press "Exit" it looks like it doesn't close the screen and doesn't turn off the app. Only after 3 presses "exit" the application turns off. What did I do wrong?
Screen1 blocks:

ChrisWard · February 22, 2021, 1:03am

Hello sumo22

You have probably got a Screen Management issue - but your Post does not belong in this section of the Forum. Kindly start a new Topic.

sumo22 · February 22, 2021, 1:37pm

I resolved the problem with suggestion of @ChrisWard and search "Screen Managment issue" and don't need open a new Topic.

Taifun · July 20, 2022, 3:37am