ui: Implement dark theme

[chrisbobbe]

The user should be able to choose from these three options for the app's appearance:

• Light
• Dark
• Follow OS

Flutter's Material Design implementation paves the way to a pretty good 1.0 version of a dark theme, for the boring, simple bits of UI we paint with Theme.of(context).colorScheme. For example, here's the result of just this simple change:

diff --git lib/widgets/app.dart lib/widgets/app.dart
index 533d3df8d..2eec13d40 100644
--- lib/widgets/app.dart
+++ lib/widgets/app.dart
@@ -20,7 +20,7 @@ class ZulipApp extends StatelessWidget {
       //   https://api.flutter.dev/flutter/material/ColorScheme/ColorScheme.fromSeed.html
       // Or try this tool to see the whole palette:
       //   https://m3.material.io/theme-builder#/custom
-      colorScheme: ColorScheme.fromSeed(seedColor: kZulipBrandColor));
+      colorScheme: ColorScheme.fromSeed(seedColor: kZulipBrandColor, brightness: Brightness.dark));
     return GlobalStoreWidget(
       child: MaterialApp(
         title: 'Zulip',

Before	After

For the message list, though, we don't draw from Theme.of(context).colorScheme, so it doesn't respond to setting Brightness.dark there:

Before	After

Probably we should bundle all the message list's light-theme colors into a palette called messageListColors or something, then create a version of that palette for dark theme.

[gnprice]

If we do this before we have local settings #97, we can have it just follow the system theme — that's what should be the default anyway, so it may as well become the only setting in the alpha. If we already have #97 when we implement this, though, might as well offer the setting from the beginning.

[neeldoshii]

Can I work on this issue @gnprice

[gnprice]

I wouldn't recommend this issue as a way to get started with this codebase. In general, see: https://chat.zulip.org/#narrow/stream/48-mobile/topic/new.20contributor/near/1672683

[gnprice]

An implementation note:

For all the colors that we have that don't correspond to anything in particular in the Material Design ColorScheme, we can put them on a ThemeExtension.

That will let us neatly bundle together a number of colors for a light theme, and corresponding colors for a dark theme, and switch between themes centrally — and even transition smoothly between them when the theme changes, which e.g. the user might have chosen in system settings to have happen on a daily cycle. In short it means we'll use the same nice mechanics that Flutter's Material implementation uses, but for areas that needn't have any design elements in common with Material.

[SharmaDhruv2511]

I would like to contribute to this issue @gnprice

[chrisbobbe]

Please see our guide here: https://github.com/zulip/zulip-flutter#picking-an-issue-to-work-on

[Syrineladeb02]

if its available i want to work on it ?

[gnprice]

@Syrineladeb02 Please see our guide to picking an issue to work on: https://github.com/zulip/zulip-flutter#picking-an-issue-to-work-on