zulip-flutter icon indicating copy to clipboard operation
zulip-flutter copied to clipboard

ui: Implement dark theme

Open chrisbobbe opened this issue 1 year ago • 8 comments

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
image image

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
image image

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.

chrisbobbe avatar May 18 '23 20:05 chrisbobbe