Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui: Implement dark theme #95

Closed
chrisbobbe opened this issue May 18, 2023 · 8 comments · Fixed by #867
Closed

ui: Implement dark theme #95

chrisbobbe opened this issue May 18, 2023 · 8 comments · Fixed by #867
Assignees
Labels
a-design Visual and UX design

Comments

@chrisbobbe
Copy link
Collaborator

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.

@gnprice
Copy link
Member

gnprice commented May 19, 2023

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.

@gnprice gnprice added the m-beta label May 26, 2023
@gnprice gnprice added this to the Beta milestone May 27, 2023
@gnprice gnprice removed the m-beta label May 27, 2023
@gnprice gnprice added the a-design Visual and UX design label Jun 14, 2023
gnprice added a commit that referenced this issue Jun 14, 2023
Filed #187, #188, and #190.

Other items already existed as #80, #82, #95, #122, and #123,
or were already complete (a compose box, and three ways of
attaching something to a message.)
@gnprice gnprice mentioned this issue Oct 30, 2023
@gnprice gnprice modified the milestones: Beta 1, Beta 2 Nov 8, 2023
@gnprice gnprice modified the milestones: Beta 2, Beta 3 Nov 22, 2023
@neeldoshii

This comment was marked as off-topic.

@gnprice

This comment was marked as off-topic.

@gnprice
Copy link
Member

gnprice commented Mar 22, 2024

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

This comment was marked as off-topic.

@chrisbobbe

This comment was marked as off-topic.

@Syrineladeb02

This comment was marked as off-topic.

@gnprice
Copy link
Member

gnprice commented Apr 1, 2024

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

chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue May 4, 2024
We added the light-mode color computations in zulip#381.

We're not ready to use this yet, but the color computations are
unlikely to change before that time comes, and finding the right
ones is a chore that's good to get done.

Related: zulip#95
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue May 4, 2024
We added the light-mode color computations in zulip#381.

We're not ready to use this yet, but the color computations are
unlikely to change before that time comes, and finding the right
ones is a chore that's good to get done.

Related: zulip#95
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue May 9, 2024
We added the light-mode color computations in zulip#381.

We're not ready to use this yet, but the color computations are
unlikely to change before that time comes, and finding the right
ones is a chore that's good to get done.

Related: zulip#95
gnprice pushed a commit to chrisbobbe/zulip-flutter that referenced this issue May 10, 2024
We added the light-mode color computations in zulip#381.

We're not ready to use this yet, but the color computations are
unlikely to change before that time comes, and finding the right
ones is a chore that's good to get done.

Related: zulip#95
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jun 21, 2024
We'll want to get these colors from theme data, soon, for zulip#95
(supporting dark theme).
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jun 21, 2024
Instead of putting them in Subscription model objects.

This helps toward zulip#95 by bundling this with our other
ThemeExtensions that will switch together between light and dark
variants when the theme changes. It's also just nicer to separate
this very UI-focused code out of api/model/ (zulip#393).

Not marking [nfc] just because of differences in caching logic,
although I don't expect a user-visible perf effect.

Related: zulip#95
Fixes: zulip#393
gnprice pushed a commit to chrisbobbe/zulip-flutter that referenced this issue Jun 21, 2024
We'll want to get these colors from theme data, soon, for zulip#95
(supporting dark theme).
gnprice pushed a commit to chrisbobbe/zulip-flutter that referenced this issue Jun 21, 2024
Instead of putting them in Subscription model objects.

This helps toward zulip#95 by bundling this with our other
ThemeExtensions that will switch together between light and dark
variants when the theme changes. It's also just nicer to separate
this very UI-focused code out of api/model/ (zulip#393).

Not marking [nfc] just because of differences in caching logic,
although I don't expect a user-visible perf effect.

Related: zulip#95
Fixes: zulip#393
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jun 26, 2024
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jun 26, 2024
For dark theme, web currently uses a mix of Pygments Monokai and
Pygments Default. Mixing in Pygments Default seems accidental, so
here we just use pure Pygments Monokai. Discussion:
  https://chat.zulip.org/#narrow/stream/431-redesign-project/topic/code.20span.20colors/near/1832283

LICENSE and AUTHORS files downloaded from:
  https://github.com/pygments/pygments/blob/f64833d9d/LICENSE
  https://github.com/pygments/pygments/blob/f64833d9d/AUTHORS

(I've included AUTHORS because LICENSE refers to it.)

Fixes: zulip#749
Related: zulip#95
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jun 26, 2024
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jun 26, 2024
For dark theme, web currently uses a mix of Pygments Monokai and
Pygments Default. Mixing in Pygments Default seems accidental, so
here we just use pure Pygments Monokai. Discussion:
  https://chat.zulip.org/#narrow/stream/431-redesign-project/topic/code.20span.20colors/near/1832283

LICENSE and AUTHORS files downloaded from:
  https://github.com/pygments/pygments/blob/f64833d9d/LICENSE
  https://github.com/pygments/pygments/blob/f64833d9d/AUTHORS

(I've included AUTHORS because LICENSE refers to it.)

Fixes: zulip#749
Related: zulip#95
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jun 26, 2024
The dark and light values come from the web app.

This completes the sweep through message-content colors for zulip#95 dark
theme. They are all either in ContentTheme with light/dark variants,
or still inline but with a comment explaining that they don't need
light/dark variants.
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jun 28, 2024
The dark and light values come from the web app.

This completes the sweep through message-content colors for zulip#95 dark
theme. They are all either in ContentTheme with light/dark variants,
or still inline but with a comment explaining that they don't need
light/dark variants.
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jul 12, 2024
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jul 16, 2024
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jul 26, 2024
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jul 26, 2024
gnprice pushed a commit to chrisbobbe/zulip-flutter that referenced this issue Jul 26, 2024
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Aug 1, 2024
…creen

NFC because the light colors are unchanged and we don't support dark
theme yet.
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Aug 2, 2024
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 are picked from various sources. For each
color, I believe the source is clear either in the code or the Git
history. Those sources are:

- the web app (in its state when we wrote the zulip-flutter commit)
- 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 table of variables in the new Figma, with a note that we're
  not sure if we chose the right variable (because the part of the
  UI doesn't have a "ready for dev" design yet)
- my brain. If I couldn't find a better source for a color, I just
  made one up and checked that it looked OK.

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
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Aug 3, 2024
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
@gnprice gnprice closed this as completed in 806e4fa Aug 9, 2024
chrisbobbe added a commit that referenced this issue Aug 14, 2024
These are followups to #95, which is marked as resolved in the
tracker.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a-design Visual and UX design
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

5 participants