Custom themes on all app screens

Discuss
#1

Hello, I am developing an application. And I wanted the user to be able to choose between the light and dark theme. I know I need to use a database to make the theme permanent, even if the user closes the application. Has tinydb and sqlite, which would be better?

But my question is how I would make the chosen theme stay on all screens, especially when they have different components

Example I put all the texts in a color, how do I get that color on a different screen than the one I created the database?

#2

Alexandre, welcome to the community!

In this case, you can store values in tinydb. Add the component in each screen using the same namespace. Than get the values using the same tag created in first screen.

2 Likes
#3

Use this method, when screen initialize store a variable value to get tinydb tag value, and set component background color and if text is required then text color to according to theme…

3 Likes
#4

You could put the new dictionaries blocks to good use.

Check this:

ThemesSample.aia (4.4 KB)

8 Likes
How to set a theme?
How to save the changes made to my app by the user?
#5

You can also write as json text and use this extension to convert to dictionary.

for example:

{
  "CardView01": 1 //(kodular colour code)
}

Then do the same as the previous post.

2 Likes
#6

thanks, i’m doing some tests here, i believe i did something similar to what you said. If it works I will put my solution here.

#7

I used a logic similar to this, I didn’t know how I would store the correct value, but now I will get it, thanks

1 Like
#8

Thanks. I understood, I had thought of something like that, but I was not managing to develop a logic

1 Like
#9

hello guys, sorry for not answering, I was very busy with college tasks.

#10

I tried a lot but I’m not able to do the themes.

This is the dictionary

blocks (2)
blocks (2)816×659 51.4 KB

the dictionary is only on that screen
tema_claro = light theme
tema_escuro = dark theme

In my application the first screen is the menu and I put this dictionary on that screen

This variable is the theme and is on all screens

blocks (3)
tema = theme

#11

this block it gets the data from the color dictionary so that each element has its respective color
blocks (4)
this block is on all screens

this is the block to change the colors of the menu screen, the other screens are different because they contain different elements

blocks (5)
blocks (5)727×1002 72 KB

#12

The “configs” screen is responsible for choosing between themes

this block is on all screens, but it is part of “value if label does not exist”
and there is no “if” block
blocks (6)
the first procedure it is a navigation button menu

This block checks, changes and saves the theme that the user chooses
blocks (7)

when I start the “menu” screen which is the second screen (the first is a splash screen) this error occurs.
Property setter was expecting a com.google.appinventor.components.runtime.TextBox component but got a Label instead.

when I start a screen that has some text boxes (I don’t know if this has anything to do with it, but I imported this screen from another application) these themes don’t change the colors of the screen, the rest works, and if I go back to the screen " menu "the application exits alone.

why is this error happening?

#13

And when changing screens in the navigation menu, the theme doesn’t get the color as soon as it changes screens, there is a short space that shows the colors with the default theme and then changing to the chosen theme, does that really happen?

#14