Skip to content

Commit

Permalink
theme: Follow system setting for light/dark theme!
Browse files Browse the repository at this point in the history
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 zulip#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: zulip#95
  • Loading branch information
chrisbobbe committed Aug 3, 2024
1 parent 726ccb6 commit c5ffb78
Show file tree
Hide file tree
Showing 4 changed files with 1 addition and 38 deletions.
27 changes: 1 addition & 26 deletions lib/widgets/theme.dart
Original file line number Diff line number Diff line change
Expand Up @@ -7,35 +7,10 @@ import 'message_list.dart';
import 'channel_colors.dart';
import 'text.dart';

/// In debug mode, controls whether the UI responds to
/// [MediaQueryData.platformBrightness].
///
/// Outside of debug mode, this is always false and the setter has no effect.
// TODO(#95) when dark theme is fully implemented, simplify away;
// the UI should always respond.
bool get debugFollowPlatformBrightness {
bool result = false;
assert(() {
result = _debugFollowPlatformBrightness;
return true;
}());
return result;
}
bool _debugFollowPlatformBrightness = false;
set debugFollowPlatformBrightness(bool value) {
assert(() {
_debugFollowPlatformBrightness = value;
return true;
}());
}


ThemeData zulipThemeData(BuildContext context) {
final DesignVariables designVariables;
final List<ThemeExtension> themeExtensions;
Brightness brightness = debugFollowPlatformBrightness
? MediaQuery.of(context).platformBrightness
: Brightness.light;
Brightness brightness = MediaQuery.of(context).platformBrightness;
switch (brightness) {
case Brightness.light: {
designVariables = DesignVariables.light();
Expand Down
4 changes: 0 additions & 4 deletions test/widgets/emoji_reaction_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import 'package:zulip/api/model/events.dart';
import 'package:zulip/api/model/model.dart';
import 'package:zulip/model/store.dart';
import 'package:zulip/widgets/emoji_reaction.dart';
import 'package:zulip/widgets/theme.dart';

import '../example_data.dart' as eg;
import '../flutter_checks.dart';
Expand Down Expand Up @@ -221,9 +220,6 @@ void main() {
await prepare();
await store.addUsers([eg.selfUser, eg.otherUser]);

assert(!debugFollowPlatformBrightness); // to be removed with #95
debugFollowPlatformBrightness = true;
addTearDown(() { debugFollowPlatformBrightness = false; });
tester.platformDispatcher.platformBrightnessTestValue = Brightness.light;
addTearDown(tester.platformDispatcher.clearPlatformBrightnessTestValue);

Expand Down
5 changes: 0 additions & 5 deletions test/widgets/message_list_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import 'package:zulip/widgets/icons.dart';
import 'package:zulip/widgets/message_list.dart';
import 'package:zulip/widgets/store.dart';
import 'package:zulip/widgets/channel_colors.dart';
import 'package:zulip/widgets/theme.dart';

import '../api/fake_api.dart';
import '../example_data.dart' as eg;
Expand Down Expand Up @@ -151,10 +150,6 @@ void main() {
});

testWidgets('smoke test for light/dark/lerped', (tester) async {
assert(!debugFollowPlatformBrightness); // to be removed with #95
debugFollowPlatformBrightness = true;
addTearDown(() { debugFollowPlatformBrightness = false; });

tester.platformDispatcher.platformBrightnessTestValue = Brightness.light;
addTearDown(tester.platformDispatcher.clearPlatformBrightnessTestValue);

Expand Down
3 changes: 0 additions & 3 deletions test/widgets/theme_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,6 @@ void main() {

final subscription = eg.subscription(eg.stream(), color: baseColor);

assert(!debugFollowPlatformBrightness); // to be removed with #95
debugFollowPlatformBrightness = true;
addTearDown(() { debugFollowPlatformBrightness = false; });
tester.platformDispatcher.platformBrightnessTestValue = Brightness.light;
addTearDown(tester.platformDispatcher.clearPlatformBrightnessTestValue);

Expand Down

0 comments on commit c5ffb78

Please sign in to comment.