Tweak dark theme #1213

Gaurav-Kushwaha-1225 · 2024-12-27T00:14:05Z

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 · 2024-12-27T14:46:38Z

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

Gaurav-Kushwaha-1225 · 2024-12-27T19:22:25Z

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 · 2024-12-27T23:42:19Z

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

Gaurav-Kushwaha-1225 · 2025-01-05T15:30:11Z

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 · 2025-01-06T06:50:25Z

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

PIG208 · 2025-01-08T02:02:04Z

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

This change updates the dark theme variables in `DesignVariables` and `MessageListTheme` acc. to their values in Figma. https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4514-33396&t=bMNXsr5LwkrHz4dp-1 CZO Discussion: https://chat.zulip.org/#narrow/stream/137-feedback/topic/design.20feedback/near/1950672 Fixes: zulip#973

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 · 2025-01-09T08:16:17Z

lib/widgets/message_list.dart

@@ -56,13 +56,13 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
  MessageListTheme.dark() :
    this._(
      dateSeparator: Colors.white,


There is a change to the dateSeparator from opaque to 0.2 opacity:
https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3888-6707&m=dev

Okay sure, let's have it to dateSeparator: Colors.white.withValues(alpha: 0.2);.
But I think it need to be updated in the design then, since it's opacity is 100% in the design file.

PIG208 · 2025-01-09T08:29:23Z

lib/widgets/theme.dart

      labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 1).toColor(),
      labelMenuButton: const Color(0xffffffff).withValues(alpha: 0.85),
      mainBackground: const Color(0xff1d1d1d),
      textInput: const Color(0xffffffff).withValues(alpha: 0.9),
-      title: const Color(0xffffffff),


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.

PIG208 · 2025-01-09T08:33:48Z

lib/widgets/message_list.dart

+      dateSeparatorText: const HSLColor.fromAHSL(0.5, 0, 0, 1).toColor(),
+      dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 0, 0, 0.14).toColor(),
+      messageTimestamp: const HSLColor.fromAHSL(0.5, 0, 0, 1).toColor(),
+      recipientHeaderText: const HSLColor.fromAHSL(0.9, 0, 0, 1).toColor(),


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.

PIG208 · 2025-01-09T08:42:12Z

lib/widgets/message_list.dart

-      recipientHeaderText: const HSLColor.fromAHSL(0.8, 0, 0, 1).toColor(),
+      dateSeparatorText: const HSLColor.fromAHSL(0.5, 0, 0, 1).toColor(),
+      dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 0, 0, 0.14).toColor(),
+      messageTimestamp: const HSLColor.fromAHSL(0.5, 0, 0, 1).toColor(),


In the new design, labelTime is the variable used for both this and dateSeparatorText. Let's introduce that variable replacing these two that we have, in its own commit.

In the new design, labelTime is the variable used for both this and dateSeparatorText. Let's introduce that variable replacing these two that we have, in its own commit.

Are you referring this in above comment to dmRecipientHeaderBg?

"This" as in the variable on the line I commented on, i.e. messageTimestamp.

PIG208 · 2025-01-09T08:48:54Z

lib/widgets/theme.dart

@@ -189,12 +189,12 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
      foreground: const Color(0xffffffff),


We also need to adjust the color of the compose box background (composeBoxBg), compose box top border (borderBar).

I just noticed that we have #1207 (PR #1233) for this. Let's just skip changes to the border bar entirely for this PR, but we still need to update background color.

Gaurav-Kushwaha-1225 force-pushed the TweakDarkTheme branch from 525b063 to 3af0d2e Compare December 27, 2024 18:25

gnprice added the maintainer review PR ready for review by Zulip maintainers label Jan 7, 2025

gnprice assigned PIG208 Jan 7, 2025

Gaurav-Kushwaha-1225 force-pushed the TweakDarkTheme branch from 076d0de to 139d4e5 Compare January 8, 2025 22:17

PIG208 reviewed Jan 9, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tweak dark theme #1213

Tweak dark theme #1213

Gaurav-Kushwaha-1225 commented Dec 27, 2024 •

edited

Loading

alya commented Dec 27, 2024

Gaurav-Kushwaha-1225 commented Dec 27, 2024

gnprice commented Dec 27, 2024

Gaurav-Kushwaha-1225 commented Jan 5, 2025

alya commented Jan 6, 2025

PIG208 commented Jan 8, 2025 •

edited

Loading

PIG208 left a comment

PIG208 Jan 9, 2025

Gaurav-Kushwaha-1225 Jan 9, 2025 •

edited

Loading

PIG208 Jan 9, 2025

PIG208 Jan 9, 2025

PIG208 Jan 9, 2025

Gaurav-Kushwaha-1225 Jan 9, 2025

PIG208 Jan 9, 2025

PIG208 Jan 9, 2025

PIG208 Jan 9, 2025

		@@ -189,12 +189,12 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
		foreground: const Color(0xffffffff),

Tweak dark theme #1213

Are you sure you want to change the base?

Tweak dark theme #1213

Conversation

Gaurav-Kushwaha-1225 commented Dec 27, 2024 • edited Loading

About Changes

Fixes: #973

Screenshots

alya commented Dec 27, 2024

Gaurav-Kushwaha-1225 commented Dec 27, 2024

gnprice commented Dec 27, 2024

Gaurav-Kushwaha-1225 commented Jan 5, 2025

alya commented Jan 6, 2025

PIG208 commented Jan 8, 2025 • edited Loading

PIG208 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Gaurav-Kushwaha-1225 Jan 9, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Gaurav-Kushwaha-1225 commented Dec 27, 2024 •

edited

Loading

PIG208 commented Jan 8, 2025 •

edited

Loading

Gaurav-Kushwaha-1225 Jan 9, 2025 •

edited

Loading