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 @gnprice,
I have updated the commit messages as required and below are the commits with short description and screenshots for you to review.

• Commit 1: 8632239

Description: The colorMessageHeaderIconInteractive is replaced with title in the DesignVariables, since the title variable is used at colorMessageHeaderIconInteractive places in the Figma Design. See the icon beside 'Latest App Version' topic name.

• Commit 2: 5140fc0

Description: The dateSeparatorText and messageTimestamp are replaced with labelTime in the MessageListTheme. Since, labelTime is the variable that is used at dateSeparatorText and messageTimestamp places in the Figma Design.
See the widget that shows date between the divider and time of all messages.

• Commit 3: 3565916

Description: The senderName and recipientHeaderText in MessageListTheme are replaced with title in DesignVariables, since the title variable is used at senderName and recipientHeaderText places in the Figma Design.
See the name of message sender like 'Gaurav Kushwaha' in below case and the icon beside 'You with yourself' in screenshots.

• Commit 4: 680a68c

Description: The streamMessageBgDefault variable in MessageListTheme is replaced with bgMessageRegular variable. Since, this new bgMessageRegular variable is being used at streamMessageBgDefault places in the Figma Design.
See the background color of messages section especially the color behind the message separating divider.

• Commit 5: 89c18a6

Description: The dateSeparator variable in MessageListTheme is replaced with foreground variable of DesignVariables, since this foreground variable is being used in Figma Design for the same purpose.
See the message separating divider color.

• Commits below screenshots are referring to: 8632239

Before	After

• Commits below screenshots are referring to: 5140fc0, 3565916, 680a68c, 89c18a6

Before	After

Hope this comment resolves the matter.

[gnprice]

The new commit messages don't contain any added information — they just repeat the same information three times.

Here's the new first commit message:

theme: Replace `colorMessageHeaderIconInteractive` with `title`

The `colorMessageHeaderIconInteractive` is replaced with `title` in the
`DesignVariables`, since the `title` variable is used at
`colorMessageHeaderIconInteractive` places in the Figma Design.

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4021-7569&t=b56sVJ6in9zEY1tU-0
discussion: https://github.com/zulip/zulip-flutter/pull/1213#discussion_r1908343739, https://github.com/zulip/zulip-flutter/pull/1213#discussion_r1938047329

This still doesn't answer the questions I asked above:

Those two places were indeed using designVariables.colorMessageHeaderIconInteractive and they get changed to use designVariables.title. But what's the actual effect of that in the UI? And what's the reason for that change?

nor the expanded version I offered later:

Here's a bit of a prompt, though, just expanding those questions in a bit more detail. This commit is changing a couple of spots in the code which look like two different spots in the UI. What are those places in the UI? And what's the effect of the change — does it make a particular thing darker in color? Lighter? Some other effect?

The other commit messages are all the same way.

---

IOW the new commit messages do the same thing as the original commit message you quoted at #1213 (comment) — which @PIG208 correctly told you was redundant, as I told you at #1213 (comment) I agreed with — but they do it even more so.

---

The one other change is that the Figma link in the first commit message got changed (oh and I guess a second link got added under "discussion"). But the screen pointed to by the new link still doesn't look like it has any examples of the UI that is changed in that commit.

[Gaurav-Kushwaha-1225]

This still doesn't answer the questions I asked above:

Those two places were indeed using designVariables.colorMessageHeaderIconInteractive and they get changed to use designVariables.title. But what's the actual effect of that in the UI? And what's the reason for that change?

nor the expanded version I offered later:

Here's a bit of a prompt, though, just expanding those questions in a bit more detail. This commit is changing a couple of spots in the code which look like two different spots in the UI. What are those places in the UI? And what's the effect of the change — does it make a particular thing darker in color? Lighter? Some other effect?

Let's take the example of this commit itself.

I have added this below line in above comment and added screenshots to refer I have attached.

See the icon beside 'Latest App Version' topic name.

or the follow icon in a topic name. Which shows the actual effect on UI? i.e. Makes the icon lighter

And in the commit message I have added this.

The colorMessageHeaderIconInteractive is replaced with title in the DesignVariables, since the title variable is used at colorMessageHeaderIconInteractive places in the Figma Design.

Which explains that in Figma designs this colorMessageHeaderIconInteractive variable is not being used to give color to what it is giving to in the app instead title variable from DesignVariables is being used for that and to keep the code consistent with the flow of design this has to be updated.

And the design frame that it is referring to in the commit link also has a similar kind of drop-down icon beside the topic name.

[Gaurav-Kushwaha-1225]

I have added this small explanation above.

If still I am not able to present this correctly,
I request @PIG208 to please help me regarding this as he only reviewed and guided me through this PR.

And I will update the commit messages once again as told earlier by @PIG208 and @gnprice too.
Thank You.

[gnprice]

See the icon beside 'Latest App Version' topic name.

I see, that's in your comment above at #1213 (comment) .

It's not in your actual commit message in the current revision of the PR, though. That commit is here:
8632239
If you intended that text to be in your commit message, then that's a good example of why it's important to reread your work before sending it for review:
https://zulip.readthedocs.io/en/latest/contributing/code-reviewing.html#reviewing-your-own-code

That has the right shape to begin to answer the questions, then. But I still don't know what it means — the text "Latest App Version" doesn't seem to appear anywhere on the screen that the commit's (new) Figma link points to:

or the follow icon in a topic name.

This sounds relevant (the information "the follow icon") but also isn't currently in the actual commit message.

Which shows the actual effect on UI? i.e. Makes the icon lighter

Great, that's an answer to my other main question. It should therefore also go in the commit message 🙂 (and I don't see it in your above comment #1213 (comment) either).

---

I don't think there's any information you need from @PIG208 which you haven't already gotten in this thread. Please try revising the commits again to answer the questions I've asked about the changes and to address the other feedback you've gotten.

If you have other questions, #mobile-dev-help is the best place to ask for help.

[Gaurav-Kushwaha-1225]

I have added this below line in above comment and added screenshots to refer I have attached.

See the icon beside 'Latest App Version' topic name.

or the follow icon in a topic name. Which shows the actual effect on UI? i.e. Makes the icon lighter

I was referring 'Latest App Version' to the screenshots I have attached in my above comment.
#1213 (comment)

Anyways, I will ask in #mobile-dev-help regarding commit messages and update this PR soon.

Thank you.

[Gaurav-Kushwaha-1225]

Hi @gnprice,
I have updated the commit messages as required and below are the commits with a short description and screenshots for you to review.

• Commit 1: 266833e

Before	After

• Commit 2: 65b5bdb

  • This commit reduces the opacity, causing the time and date stamp to appear lighter/less opaque in both themes. Should I explicitly mention this in the commit message, or would a different phrasing be more appropriate to avoid confusion with "lighter" in other commits?

Before	After

• Commit 3: 4cc0e76

Before	After

• Commit 4: 91df707

Before	After

• Commit 5: 91bd479

Before	After