theme: Follow system setting for light/dark theme!

[chrisbobbe]

We now have dark-theme variants in all the styles that differ between light and dark, in all of the app we've implemented so far. It's time to let users benefit from that work!

We don't yet let the user choose between dark/light/system in the app -- that's #97 "Store some client settings" -- but the "system" behavior should be the default anyway, and this commit provides that.

The dark-theme colors come from various sources. For each color, I believe the source is clear either in the code or the Git history. Those sources are:

• Flutter's library of Material Design widgets, for UI that's been using those (like the compose box)
• the "ready for dev" parts of the new Figma, like this: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=2940-48987&m=dev
• the web app (in its state when we wrote the zulip-flutter commit)
• the table of variables in the new Figma, with a note that we're not sure if we chose the right variable (because that part of the UI doesn't have a "ready for dev" design in the Figma yet)
• my brain and a quick check that it looked OK, as a last resort

We'll want to update the colors as Vlad's work on the new Figma progresses, and also incorporate his feedback from trying out the app in dark theme.

Fixes: #95

[chrisbobbe]

The theme change is supposed to animate, over 200ms, but I haven't managed to reproduce that on iOS yet. I think what's happening is:

• When I change the system setting manually, the 200ms animation happens while I'm in the Settings app, so it's finished by the time I go back to Zulip.
• When I set it to change automatically at some time in the near future, the change doesn't actually happen unless my screen is off, and I guess in this case too the animation happens before I can return to Zulip, while the screen is off. There's a note on the iOS settings page: "iPhone may wait to transition until you are not using the screen."

Ah well. The animation should show when we add the in-app setting, and I have seen it on Android upon returning to the app after changing the system setting manually.

[gnprice]

• When I set it to change automatically at some time in the near future, the change doesn't actually happen unless my screen is off, and I guess in this case too the animation happens before I can return to Zulip, while the screen is off. There's a note on the iOS settings page: "iPhone may wait to transition until you are not using the screen."

Fun. I guess if you're using the screen at the appointed time, and keep using it continuously, then at some point after two minutes or an hour or something it'll decide to stop holding out and will make the transition before your eyes. But that's a pain to demonstrate.

I have watched the app make the transition at previous stages of this work, just by editing the brightness used in zulipThemeData and doing a hot reload. It was nice and smooth.

[chrisbobbe]

I have watched the app make the transition at previous stages of this work, just by editing the brightness used in zulipThemeData and doing a hot reload. It was nice and smooth.

Oh yeah definitely; me too. If I hadn't seen that, I'd want to investigate more to see if the lack of animation was just a bug I wrote into the code :)

[gnprice]

The code all LGTM.

@alya Thoughts on the behavior change where the app will now always follow the system's light-theme/dark-theme setting, rather than always be in light theme? (Later we'll add a setting for it; that's #97.)

Seems fine to me — only people who have the system on dark theme will be affected, and probably more of them are annoyed the app is currently light theme than will be annoyed by the app following to dark theme. And this is still a beta, after all. Showing dark theme to dark-theme users will help get feedback on it.

[chrisbobbe]

Just added a small commit:

theme: Use slightly more efficient `MediaQuery.platformBrightnessOf`

[gnprice]

Cool, that change LGTM too.

[alya]

Sounds like a good plan to me!

[gnprice]

OK — merging!

I took a quick look at git log -p pr/867..origin -- lib/widgets to see if there's anything new that needs adjustment for a dark theme. The only thing that looks suspicious is MutedUnreadBadge, from #714. So @chrisbobbe please take a look and see if that needs a TODO(#95) comment and/or a quick fixup.