Question 1

How do you support dark mode in Flutter?

Accepted Answer

Three steps: (1) give MaterialApp both theme and darkTheme, each from ColorScheme.fromSeed, the second with brightness: Brightness.dark; (2) drive themeMode — ThemeMode.system by default, persisting the user's choice if they can override it; (3) keep hardcoded colours out of widget code — everything comes from Theme.of(context).colorScheme. The last point matters most: without the first two dark mode does not work at all, without the third it half-works and leaves broken screens.

Question 2

How does Theme.of(context) work?

Accepted Answer

It is the classic InheritedWidget pattern: a Theme widget higher in the tree holds the ThemeData, and of(context) walks up from your context to the nearest Theme and subscribes to it. The subscription is the important part: when the theme changes, widgets using that context rebuild automatically. That leads to a practical nuance — which context you pass matters, and a screen's own build context can resolve differently from one obtained inside a Builder.

Question 3

How would you organise a design system in a large app?

Accepted Answer

One central theme definition: colours from ColorScheme, typography from TextTheme, and component defaults from component themes like ElevatedButtonTheme and CardTheme. Recurring components (an AppPrimaryButton, say) become their own widgets so the styling lives in one place. For values the standard ThemeData has no slot for — spacing scales, radii — I use a ThemeExtension, which attaches them to the theme in a type-safe way. And a review rule: a PR containing a raw colour or TextStyle goes back.

Question 4

Changing the theme rebuilds the whole screen — is that not a problem?

Accepted Answer

The rebuild is wide, but a theme change is a rare event — a user switches to dark mode once a day, not sixty times a second. So this is not where optimisation belongs. What matters is the frequent rebuilds: scrolling a list, typing, animating. Tie it to a principle: I choose what to optimise by frequency — rare and wide is cheap, frequent and wide is expensive. Making that distinction is the reasoning expected at middle level.

Approach	Result
Hardcoding `Colors.blue` in a widget	Unreadable in dark mode; a brand change means editing every file
`Theme.of(context).colorScheme.primary`	Correct in both modes, changed from one place
Writing `TextStyle(fontSize: 16)`	Typography drifts between screens
`Theme.of(context).textTheme.bodyLarge`	Consistent typography that respects accessibility settings

Theming and Material 3

📚 Sources and documentation