Font line spacing (?) gets weird once you choose any of the new theme options
I made the mistake of immediately modifying one of my apps to use some of the new theme options, and 1) they don't seem to be working as I'd expect, and 2) I also can't seem to revert my app back to how it was.
Thankfully, I did have a template created from this app a few months ago that has the original settings. Take note that there is a title (heading 1) and a subtitle for the app in the upper left:
To illustrate what's happening, I've changed the theme to "Ocean," one of the new theme options. As you can see, the bulk of the text (the paragraph-sized text at least) is pretty much the same size visually as it was before. However, the title/heading 1 now takes up so much space that the subtitle underneath it isn't even visible anymore:
In the real app, I didn't realize immediately how much the look of the text had changed, and so I brought in Montserrat font through Google Fonts. Initially, I thought this was the issue, but you can see the overall layout of the text is pretty much the same as the previous screenshot:
Realizing today that I need to just revert my app back to how it was until these features work better, I found that I can't seem to do that. It seems that once you've chosen any of the new themes, the line spacing is just... stuck like this.
I don't have any web development experience, so in trying to figure out what is happening, I "inspected" heading 1 of the original version, and I see this:
When I inspect the same heading after changing the theme to "Ocean," some of the settings are different:
I don't know what the cause is or if these last two screenshots are all that relevant, but the new themes do not seem to be working in this regard?
You can better see just how large (and vertically offset?) the line spacing is on heading 1 when I highlight it:
It looks even worse when the text needs to wrap (heading 2):
Hi @NicoleJohnson , this is as expected. As in new themes the text font changes even with the same type. Here is a comparison:
The headings font size are different in old and new theme (the number indicates the font size of the text type).
So when you use ocean theme, the heading 1 font is much bigger than in old theme which also affect the old theme. So here are some facts:
1. apps created by previous version earlier than this release will still use old theme.
2. new apps since this release will use new theme
3. We warn user to be careful if they want switch from old theme to a new theme for their existing apps. Some elements may not look good if you do so because the system structures of old and new theme are absolutely different and variables cannot be mapped accurately. So something odd might been seen if you do a switch (user may have to do lots manual work fixing the problems).
We would recommend not to switch if not that necessary or at least switch to a same mode theme（i.e. light theme-to-light theme，or dark theme-to-dark theme）.
However, if you are saying you cannot revert back to your original theme, that should be a problem. If you do not save and you refresh you app or click undo, your app should recover. Can you share us a copy of the app so we see what is the problem for reverting? Thank you!
@Wei_Ying, here's a comparison of some text themed the old way:
And the new way--there's now a lot of negative space between the lines despite the font size and line spacing staying the same (at least as far as settings I can access through the builder):
I totally understand warning users that opting for a new theme will make changes to their app. What I didn't expect is that I can't even manually return everything back to how it was. It really seems as if the headings are "locked in" to appearing a certain way. For example, if I choose heading 1 then change the pixel size to 16, there's a ton of negative space above the text, as if it's expecting much larger text to be there:
There's much less negative space (maybe half as much?) when doing this with the old theme options:
