Tweak dark theme

[Gaurav-Kushwaha-1225]

About Changes

This PR updates the color variables in DesignVariables and MessageListTheme for a slightly higher contrast in dark theme according to the values in the figma file.

Fixes: #973

Screenshots

Before	After

[alya]

Please clean up your commit history and post again to request a review. See here for guidelines.

[Gaurav-Kushwaha-1225]

Please clean up your commit history and post again to request a review. See here for guidelines.

I’ve cleaned up the commit history by removing unnecessary merge commits into the TweakDarkTheme branch and combining related changes into a single commit for clarity.

This is my first time using rebase -i. During the process, I used pick, squash, and drop commands for various commits. I initially thought there would be separate commit messages for each, but later realized they were combined into one during the rebase.
Although, it asked to enter three commit messages after rebasing, Idk why it happened. Could you please explain why all commit messages were merged into one?
I’d like to understand this better for future contributions.

Apologies for any confusion.

Please review the updated PR.

[gnprice]

The #git help channel on chat.zulip.org is a good place to ask questions about using Git.

[Gaurav-Kushwaha-1225]

Please clean up your commit history and post again to request a review. See here for guidelines.

Hi @alya, please review the updated PR.

[alya]

Thanks! I'll let other folks take a look at this one.

[PIG208]

Hi! Please read through the commit style guide (also previously linked by Alya) linked in our README and fix the commit message: https://github.com/zulip/zulip-flutter?tab=readme-ov-file#submitting-a-pull-request

[PIG208]

Thanks for the PR! I noted the differences between this revision and the Figma design after going through lib/widgets/message_list.dart and some part of lib/widgets/compose_box.dart for colors used in the widgets.

Some of the comments are just about different colors being used, and others request the addition/removal of variables. It should be fine to include color adjustments all in a single commit, but for adding/removing variables, let's try to have separate commits for the ones added, so it is easier to see which variables they replace. Consider using the NFC tag if a commit is a pure refactor.

I think there are also changes to the autocomplete window, but that should be addressed in #995,

[Gaurav-Kushwaha-1225]

Hi @PIG208,
I have updated the commits as per your request.

• Made separate commits as required
• Removed colorMessageHeaderIconInteractive, senderName & recipientHeaderText
• Added labelTime in MessageListTheme

Have a review of these changes and tell if anything else is required regarding this issue.

[PIG208]

Thanks for the update! The changes mostly look good to me, except for the first commit that adjusts a bunch of colors. It turned out that "[nfc]" is not applicable for the commits, and that's fine. They are useful to mark commits that are meant to incur no behavioral changes, so the reviewer can focus on the non-nfc commits.

The final commit of the PR needs a line to fix the issue:

...(other stuff)...

Fixes: #973

[PIG208]

Could you identify where this color (dmRecipientHeaderBg) comes from? I looked at https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3702-28206&p=f&t=dBCq6jmgNML8Joly-0 but couldn't find it.

[Gaurav-Kushwaha-1225]

• This dmRecipientHeaderBg is the light-colored top bar in below screen.
• Though, it is represented using bg-top-bar in the figma design file with value HSLColor.fromAHSL(1, 0, 0, 0.14).toColor().

[PIG208]

Do you have a link the the design? Selecting the frame and then copying the URL should do. For new colors or adjustments the Figma link should also be included in the commit messages.

[Gaurav-Kushwaha-1225]

Sure,
https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=xbe6lt56wtywbnXX-0

• This is design link for dmRecipientHeaderBg.
• As I have mentioned above, it is represented using bg-top-bar in the figma design file with value HSLColor.fromAHSL(1, 0, 0, 0.14).toColor().

[PIG208]

Thanks for the link!

As I have mentioned above, it is represented using bg-top-bar in the figma design file with value HSLColor.fromAHSL(1, 0, 0, 0.14).toColor().

It looks like the Figma design doesn't have the recipient header (it has the app/top bar, though). If we are using bg-top-bar for the recipient headers. It might be a good idea to just use that same variable and remove dmRecipientHeaderBg.

However, given that the Figma design doesn't actually show bg-top-bar being used for that specific message list item, I think we should be fine holding off from updating dmRecipientHeaderBg, unless such a change is necessary for it to not look odd. Asking for clarification on this in #mobile-design should help.

[Gaurav-Kushwaha-1225]

• Raised a query in the #mobile-design channel.

• Reverted changes in dmRecipientHeaderBg. If there comes any further decisions on this issue on the chat, the PR will be updated accordingly.

[Gaurav-Kushwaha-1225]

Thanks @PIG208 for the review.
I will look after the requested changes above and update this PR soon.

[PIG208]

Thanks for the update! Left some more comments.

[PIG208]

Ah, I missed this earlier. Here, streamMessageBgDefault does not match the color in the Figma design. The variable corresponding to this appears to be bg-message-regular. We should rename this variable and update the color.

[Gaurav-Kushwaha-1225]

Sure, I will do that in a separate commit.
So, I will rename it as bgMessageRegular and its value will be

• const HSLColor.fromAHSL(1, 0, 0, 0.11).toColor() for dark theme
• const HSLColor.fromAHSL(1, 0, 0, 1).toColor() for light theme.

I will place it alphabetically that means in top of MessageListTheme variables.

[Gaurav-Kushwaha-1225]

While, working on this comment, I found this line in message_list.dart in main branch on zulip-flutter repo;

• line 156, dmRecipientHeaderBg: Color.lerp(streamMessageBgDefault, other.dmRecipientHeaderBg, t)!,

• Here, it should be dmRecipientHeaderBg: Color.lerp(dmRecipientHeaderBg, other.dmRecipientHeaderBg, t)!,

Am I right ??

[PIG208]

Ah, great find. Yes, this is a bug.

See also: #1305 (comment)

[Gaurav-Kushwaha-1225]

Sure, I will update the PR soon with all the requested changes.
Thank you.

[Gaurav-Kushwaha-1225]

Ah, great find. Yes, this is a bug.

See also: #1305 (comment)

Since, this issue is already being addressed in #1305 (comment) and being resolved there in some commit.

So, while changing the streamMessageBgDefault variable to bgMessageRegular what shall I add to this line.
i.e.

• dmRecipientHeaderBg: Color.lerp(streamMessageBgDefault, other.dmRecipientHeaderBg, t)!

Should I add bgMessageRegular in that place.

• dmRecipientHeaderBg: Color.lerp(bgMessageRegular, other.dmRecipientHeaderBg, t)!

[PIG208]

It should be fine to include a fix in your PR, because it is fairly trivial.

[Gaurav-Kushwaha-1225]

Hi @PIG208 ,
I have updated this PR according to your review.

Please have a look at it and let me know if anything else is required.
Thank you! 😊

[PIG208]

This should be designVariables.title.withFadedAlpha(0.5) and the same for the other location.

https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3941-7975&t=dgExngy3z67AN7HZ-0

[Gaurav-Kushwaha-1225]

Umm, this gives color to icons beside topic names in the chat section. Right?

In below screenshot, it shows the color of the icon it represents. And, it's a white color with alpha 0.9.

[PIG208]

Thanks for the update! Left a comment. Could you also post the updated screenshots?