Easier way of Dark Mode on app

Hello!
I'm doing a dark mode on my app.
It should work like this:
Initialize, Switch off, white background, black texts everywhere;
Switch on, black background, white texts everywhere;
Switch off, white background, black texts everywhere again.
Works perfectly with the blocks arranged like the image below.

The thing is, i have hundres of buttons, and at least a thousand of labels...
Is there an easier way that i won't need to drag every block...?

Write value procedures to give you lists of all your buttons, labels, vertical arrangements, etc.
(all_buttons, all_labels,...)

Use the Any components in for each loops to set their attributes.
Sample app:

Do i have to do like this?
image

if so, that would be pretty much the same... i would still have to drag 400 buttons and 1700 labels... a little less painful, but still...

How did you dig yourself into a hole this deep?

1 Like

haha, funny story.
I made a book of lyrics with over 400+ songs for a church.
Each music is a button, each verse is a label, because the Chorus had to be Bold.

Also, i'm a beginner on Apps development and i never thought it would be this much of stuff. Plus, i had no idea App Invetor was this much limited.

How did you arrange that on the screen? :upside_down_face:

Can you listen to music with your app or are there only (song) lyrics?

The ListView can be customized :man_facepalming:
http://ai2.appinventor.mit.edu/reference/components/userinterface.html#ListView

It is equivalent to a list of buttons.

Keep a list of song names and their corresponding text file names in the Media folder, and
load the matching file from the ListView Selection.

When the file contents arrive, load them into a html label, which will accommodate your

 bold <b> markup </b>

What you said makes sense, i just have no idea how to apply that, as I said before, i'm a beginner.
I will leave a video of how the app works, and you tell me if you see an eaiser or more viable way of doing it.

No, you can just read the Lyrics, it is used to sing along at the church during the worship time on the service.

You only need 2 labels and no buttons.
Store the songs and lyrics in a ListPicker, then when the user selects a song, set label 1 to the song Selected, set label 2 to the lyrics.
Mike.

A simple example based upon what @m_casky has suggested.

lyrics.aia (3.2 KB)

I have used list blocks to build the list, but what you can do is use text or csv files to populate the list.

I tested it. Works great, not exact the way I was doing mine, but yours might be better.

But i do have a few questions...
I can see i need 400 Lists there. Is there a way to Bold inside the text there? because this is kinda necessary for me.

Also, is there any tutorial teaching how to use the files to populate the list? Will I need 400 files?

If you want all the text of the lyrics bold, just set the label to bold.

If you only want certain words in the lyrics bold, set the label to HTMLformatt, and add the HTML tags you want to use in the csv file, or in the label text field. (If you don’t want to use a csv file)

You can then add <b> before the word you want bold in the csv file and end it with</b>
You can also do other things, like <font color="red"> to color the text</font> or <I>italic</I>

You can also use many other HTML tags, such as <br> for a new line and <p> for a new paragraph and so on.

You should probably use a unique separator such as # in your csv file, rather than a comma.

The nice thing about using a csv file is you can type it out in any word editor, use spell check and copy and paste with ease and so on.
Mike.

Thanks a lot, that gives me a great help, i had no idea how to do that.

I do know some HTML, but what i really don't understand in all this, is how to use a CSV file in App Inventor.

http://www.appinventor.org/bookChapters/chapter19.pdf

FAQ Section: Lists first article