SwiftUI Series 11｜SwiftUI’s dark mode, dynamic fonts and multi-size adaptation

Many pages looked normal on the development machine at first:

-The color is okay -The font size is also appropriate

• The layout is quite smooth

But just cut to:

• dark mode
• Larger font
• Narrower screen
• Longer copy

The problem will be exposed immediately.

This shows that many so-called “adaptation problems” are essentially the page being written into a default condition from the beginning.

1. Dark mode, dynamic fonts, and different screens are all asking the same thing: is the page flexible to environmental changes?

A common situation is to look at these adaptation items separately:

• Dark mode is a color issue
• Dynamic fonts are a matter of font size
• Small screen adaptation is a layout issue

Of course, these judgments are correct, but from a higher level, they are essentially testing the same thing:

Is the page only established in one “default environment”?

If a page only looks reasonable in the default font size, light mode, and standard size, its problem is actually insufficient flexibility.

2. The most common adaptation failure is that too many visual assumptions are hard-coded.

For example:

• Text is always one line
• Fixed card height
• The distance between icons and copywriting can always be maintained
• A certain color is clear enough on any background

These assumptions may all hold true in a single environment, but once the environment changes, they all collapse together.

So what’s really important about adaptation is writing less of this fragile assumption.

3. The most common problem exposed by dynamic fonts is that the layout level is not stable.

When the topic of dynamic fonts is brought up, the first reaction is:

• If the font size is too large, will it exceed the

This is certainly a problem, but the deeper risks are:

• Certain structures are inherently only valid under a fixed copy length.
• Some cards are inherently maintained with hard-coded heights
• There is no flexibility in some image-text relationships.

So dynamic fonts are testing whether the layout is only valid at “just this size”.

4. The real difficulty of dark mode is whether the hierarchy and contrast relationship will be unbalanced.

Many pages have problems after switching to dark colors:

• The relationship between background and text hierarchy is not clear
• Accent colors look good in light mode, but are harsh in dark mode
• Secondary information has too low contrast in dark colors

In other words, dark mode tests whether the visual hierarchy is clear enough.

5. Adaptation to screens of different sizes is essentially about whether the space allocation logic is stable enough

Some pages look comfortable on a large screen, but start to look like this on a small screen:

• squeeze
• break
• Everything is messed up after the line break

This shows that the problem is usually not with the small screen itself, but with unstable space allocation logic. For example:

• Which areas should be elastically expanded? -Which areas can be line-wrapped?
• Which content has higher priority

I didn’t think about this clearly at the beginning, but it will be exposed once the equipment changes.

6. Conclusion: The true adaptability is essentially the flexibility of the page to environmental changes.

To put it in shorter form, I would say:

SwiftUI pages adapt to dark mode, dynamic fonts and screens of different sizes. What really needs to be done is not to lock the page in a default environment from the beginning.

When the page itself is flexible, the adaptation will be much more natural; When there is no elasticity, later patches usually become more and more numerous.