zulip-flutter
zulip-flutter copied to clipboard
ui: Implement dark theme
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.