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,

[PIG208]

Looking at this, I see an opportunity to remove colorMessageHeaderIconInteractive (below this) and use title with the right opacity at places where colorMessageHeaderIconInteractive is used. Because it is adjusting something that was not previously a part of the design, let's do that in a separate commit.

[Gaurav-Kushwaha-1225]

If colorMessageHeaderIconInteractive is removed from DesignVariables (and use title at places where it is used), it must be removed from both the light and dark themes.

In the dark theme, colorMessageHeaderIconInteractive is identical to title but with a different opacity.

      title: const Color(0xffffffff),
      colorMessageHeaderIconInteractive: Colors.white.withValues(alpha: 0.2),

However, in the light theme, colorMessageHeaderIconInteractive and title have distinct values (Colors.black.withValues(alpha: 0.2) and Color(0xff1a1a1a)), not just a difference in opacity.

      title: const Color(0xff1a1a1a),
      colorMessageHeaderIconInteractive: Colors.black.withValues(alpha: 0.2),

[PIG208]

I see. Let's make sure that we stick to the design. In Figma, I see that we use title for that element, so we should do just that.

It was also hinted that designVariables.colorMessageHeaderIconInteractive is meant to be temporary before we have a color specified in a design:

              // TODO(design) copies the recipient header in web; is there a better color?
              color: designVariables.colorMessageHeaderIconInteractive, size: 14)),

so it should be fine to remove it.

[PIG208]

Both this and senderName are the same as DesignVariables.title (and title is the variable used in Figma), so let's use that for consistency with the design, and remove these variables, all in its separate commit.

[Gaurav-Kushwaha-1225]

Here also,
If senderName and recipientHeaderText is removed from MessageListTheme (and use title at places where it is used), it must be removed from both the light and dark themes.

In the dark theme, both these values are identical to title but with a different opacity.

      recipientHeaderText: const HSLColor.fromAHSL(0.9, 0, 0, 1).toColor(),
      senderName: const HSLColor.fromAHSL(0.9, 0, 0, 1).toColor(),

      title: const Color(0xffffffff),

However, in the light theme, both of them and title have distinct values not just a difference in opacity.

      recipientHeaderText: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
      senderName: const HSLColor.fromAHSL(1, 0, 0, 0.2).toColor(),

      title: const Color(0xff1a1a1a),

[PIG208]

Similarly, we should refer to the Figma design. Because the design uses title in light/dark mode, we should use the same variable as well.