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

Tweak dark theme #1213

Merged
merged 5 commits into from
Mar 3, 2025
Merged

Tweak dark theme #1213

merged 5 commits into from
Mar 3, 2025

Conversation

Gaurav-Kushwaha-1225
Copy link
Contributor

@Gaurav-Kushwaha-1225 Gaurav-Kushwaha-1225 commented Dec 27, 2024

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
Copy link
Collaborator

alya commented Dec 27, 2024

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

@Gaurav-Kushwaha-1225
Copy link
Contributor Author

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
Copy link
Member

gnprice commented Dec 27, 2024

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

@Gaurav-Kushwaha-1225
Copy link
Contributor Author

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
Copy link
Collaborator

alya commented Jan 6, 2025

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

@gnprice gnprice added the maintainer review PR ready for review by Zulip maintainers label Jan 7, 2025
@PIG208
Copy link
Member

PIG208 commented Jan 8, 2025

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

Copy link
Member

@PIG208 PIG208 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Jan 12, 2025
Adjusted the colors for `foreground` in
`DesignVariables` and `dateSeparator` in `MessageListTheme`
as asked.
`foreground`: zulip#1213 (comment)
`dateSeparator`: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Jan 12, 2025
Added `labelTime` variable in `MessageListTheme`
that replaces the `dateSeparatorText` and
`messageTimestamp` variable according to the latest
design.

`labelTime`: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Jan 12, 2025
Adjusted the colors for `foreground` in
`DesignVariables` and `dateSeparator` in
`MessageListTheme` as asked.

`foreground`: zulip#1213 (comment)
`dateSeparator`: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Jan 12, 2025
Added `labelTime` variable in `MessageListTheme`
that replaces the `dateSeparatorText` and
`messageTimestamp` variable according to the latest
design.

`labelTime`: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Jan 15, 2025
Adjusted the colors for `foreground` in
`DesignVariables` and `dateSeparator` in
`MessageListTheme` as asked.

`foreground`: zulip#1213 (comment)
`dateSeparator`: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Jan 15, 2025
Added `labelTime` variable in `MessageListTheme`
that replaces the `dateSeparatorText` and
`messageTimestamp` variable according to the latest
design.

`labelTime`: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Jan 15, 2025
Added `labelTime` variable in `MessageListTheme`
that replaces the `dateSeparatorText` and
`messageTimestamp` variable according to the latest
design.

`labelTime`: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Jan 15, 2025
Adjusted the colors for `foreground` in
`DesignVariables` and `dateSeparator` in `MessageListTheme`
as asked.
`foreground`: zulip#1213 (comment)
`dateSeparator`: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Jan 15, 2025
Added `labelTime` variable in `MessageListTheme`
that replaces the `dateSeparatorText` and
`messageTimestamp` variable according to the latest
design.

`labelTime`: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Jan 15, 2025
Removed `colorMessageHeaderIconInteractive` from
`DesignVariables` and used `title` in place of it
as per the design guidelines.
discussion: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Jan 15, 2025
Removed `senderName` & `recipientHeaderText` from
`MessageListTheme` and used `title` in place of it
as per the design guidelines.
discussion: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Jan 21, 2025
Adjusted the colors for `foreground` in
`DesignVariables` and `dateSeparator` in `MessageListTheme`
as asked.
`foreground`: zulip#1213 (comment)
`dateSeparator`: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Jan 21, 2025
Added `labelTime` variable in `MessageListTheme`
that replaces the `dateSeparatorText` and
`messageTimestamp` variable according to the latest
design.

`labelTime`: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Feb 22, 2025
The `senderName` & `recipientHeaderText` giving colors to name of sender
in each message and left icon + text in the Message Header of both Stream
messages and DMs, respectively, have been replaced to a lighter and darker
versions in dark and light themes, respectively, using the `title`
variable of `DesignVariables`, according to the Figma Design.

Note: left icon in the Message Header of Stream message is added just to
give hspace (see line no. 1075 in `lib/widgets/message_list.dart`).

This specific UI of left icon and text in message header for the DMs
doesn't appear in the Figma design, but we use `title` variable because
`recipientHeaderText` was used previously for coloring them.

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=vu2wWOBiVb0BB6Vz-0
discussion: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Feb 22, 2025
The `streamMessageBgDefault` giving colors to the background of both
Stream messages and DMs UI, has been changed to a darker version for the
dark theme, using a new `bgMessageRegular` variable in the
`MessageListTheme`, according to the Figma design. It's just a refactor
of variable for the light theme.

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=vu2wWOBiVb0BB6Vz-0
discussion: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Feb 22, 2025
The variable giving color to divider lines in the Message List UI
i.e. `dateSeparator` has been replaced with the `foreground` variable
of `DesignVariables`, according to the Figma design.
There isn't any change in the values of color from the previous one i.e.
`dateSeparator`.

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=vu2wWOBiVb0BB6Vz-0
discussion: zulip#1213 (comment)

Fixes: zulip#973
@Gaurav-Kushwaha-1225
Copy link
Contributor Author

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.

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
Before After
Before After
Before After

Copy link
Member

@gnprice gnprice left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @Gaurav-Kushwaha-1225 for the revision — this is quite a lot better. A few specific comments below.

Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Feb 27, 2025
The `dateSeparatorText` and `messageTimestamp`, which define the color
of the date and time stamps on messages and message headers, have been
replaced with a lower-contrast version in both dark and light themes.
This is done using a new `labelTime` variable in `MessageListTheme`,
aligning with the Figma Design.

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=QCuXEn8bYVbf4Fli-0
discussion: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Feb 27, 2025
The `senderName` & `recipientHeaderText` giving colors to name of sender
in each message and left icon + text in the Message Header of both Stream
messages and DMs, respectively, have been replaced to a lighter and darker
versions in dark and light themes, respectively, using the `title`
variable of `DesignVariables`, according to the Figma Design.

This specific UI of left icon and text in message header for the DMs
doesnt appear in the Figma design, but we use `title` variable because
`recipientHeaderText` was used previously for coloring them.

Figma:
- https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=vu2wWOBiVb0BB6Vz-0
- https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4010-6352&t=9j2mOkL1Pds0XVAE-0
discussion: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Feb 27, 2025
The `streamMessageBgDefault` giving colors to the background of both
Stream messages and DMs UI, has been changed to a darker version for the
dark theme, using a new `bgMessageRegular` variable in the
`MessageListTheme`, according to the Figma design. It's just a refactor
of variable for the light theme.

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=vu2wWOBiVb0BB6Vz-0
discussion: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Feb 27, 2025
The variable giving color to divider lines in the Message List UI
i.e. `dateSeparator` has been replaced with the `foreground` variable
of `DesignVariables`, according to the Figma design.
There isn't any change in the values of color from the previous one i.e.
`dateSeparator`.

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=vu2wWOBiVb0BB6Vz-0
discussion: zulip#1213 (comment)

Fixes: zulip#973
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Feb 27, 2025
The `colorMessageHeaderIconInteractive` giving color to follow/mute
icons beside topic names have been replaced to a lighter and darker
versions in dark and light themes respectively, using the `title`
variable of `DesignVariables`.

This specific UI doesn't appear in the Figma design, but we use `title`
because it's used there for the color of a dropdown icon that also
appears next to topics.

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4021-7569&t=b56sVJ6in9zEY1tU-0
discussion: zulip#1213 (comment), zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Feb 27, 2025
The `dateSeparatorText` and `messageTimestamp`, which define the color
of the date and time stamps on messages and message headers, have been
replaced with a lower-contrast version in both dark and light themes.
This is done using a new `labelTime` variable in `MessageListTheme`,
aligning with the Figma Design.

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=QCuXEn8bYVbf4Fli-0
discussion: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Feb 27, 2025
The `senderName` & `recipientHeaderText` giving colors to name of sender
in each message and left icon + text in the Message Header of both Stream
messages and DMs, respectively, have been replaced to a lighter and darker
versions in dark and light themes, respectively, using the `title`
variable of `DesignVariables`, according to the Figma Design.

This specific UI of left icon and text in message header for the DMs
doesnt appear in the Figma design, but we use `title` variable because
`recipientHeaderText` was used previously for coloring them.

Figma:
- https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=vu2wWOBiVb0BB6Vz-0
- https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4010-6352&t=9j2mOkL1Pds0XVAE-0
discussion: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Feb 27, 2025
The `streamMessageBgDefault` giving colors to the background of both
Stream messages and DMs UI, has been changed to a darker version for the
dark theme, using a new `bgMessageRegular` variable in the
`MessageListTheme`, according to the Figma design. It's just a refactor
of variable for the light theme.

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=vu2wWOBiVb0BB6Vz-0
discussion: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Feb 27, 2025
The variable giving color to divider lines in the Message List UI
i.e. `dateSeparator` has been replaced with the `foreground` variable
of `DesignVariables`, according to the Figma design.
There isn't any change in the values of color from the previous one i.e.
`dateSeparator`.

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=vu2wWOBiVb0BB6Vz-0
discussion: zulip#1213 (comment)

Fixes: zulip#973
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Feb 27, 2025
The `streamMessageBgDefault` giving colors to the background of both
Stream messages and DMs UI, has been changed to a darker version for the
dark theme, using a new `bgMessageRegular` variable in the
`MessageListTheme`, according to the Figma design. It's just a refactor
of variable for the light theme.

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=vu2wWOBiVb0BB6Vz-0
discussion: zulip#1213 (comment)
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this pull request Feb 27, 2025
The variable giving color to divider lines in the Message List UI
i.e. `dateSeparator` has been replaced with the `foreground` variable
of `DesignVariables`, according to the Figma design.
There isn't any change in the values of color from the previous one i.e.
`dateSeparator`.

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=vu2wWOBiVb0BB6Vz-0
discussion: zulip#1213 (comment)

Fixes: zulip#973
The `colorMessageHeaderIconInteractive` giving color to follow/mute
icons beside topic names have been replaced to a lighter and darker
versions in dark and light themes respectively, using the `title`
variable of `DesignVariables`.

This specific UI doesn't appear in the Figma design, but we use `title`
because it's used there for the color of a dropdown icon that also
appears next to topics.

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4021-7569&t=b56sVJ6in9zEY1tU-0
discussion: zulip#1213 (comment), zulip#1213 (comment)
The `dateSeparatorText` and `messageTimestamp`, which define the color
of the date and time stamps on messages and message headers, have been
replaced with a lower-contrast version in both dark and light themes.
This is done using a new `labelTime` variable in `MessageListTheme`,
aligning with the Figma Design.

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=QCuXEn8bYVbf4Fli-0
discussion: zulip#1213 (comment)
The `senderName` & `recipientHeaderText` giving colors to name of sender
in each message and left icon + text in the Message Header of both Stream
messages and DMs, respectively, have been replaced to a lighter and darker
versions in dark and light themes, respectively, using the `title`
variable of `DesignVariables`, according to the Figma Design.

This specific UI of left icon and text in message header for the DMs
doesnt appear in the Figma design, but we use `title` variable because
`recipientHeaderText` was used previously for coloring them.

Figma:
- https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=vu2wWOBiVb0BB6Vz-0
- https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4010-6352&t=9j2mOkL1Pds0XVAE-0
discussion: zulip#1213 (comment)
The `streamMessageBgDefault` giving colors to the background of both
Stream messages and DMs UI, has been changed to a darker version for the
dark theme, using a new `bgMessageRegular` variable in the
`MessageListTheme`, according to the Figma design. It's just a refactor
of variable for the light theme.

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=vu2wWOBiVb0BB6Vz-0
discussion: zulip#1213 (comment)
The variable giving color to divider lines in the Message List UI
i.e. `dateSeparator` has been replaced with the `foreground` variable
of `DesignVariables`, according to the Figma design.
There isn't any change in the values of color from the previous one i.e.
`dateSeparator`.

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=vu2wWOBiVb0BB6Vz-0
discussion: zulip#1213 (comment)

Fixes: zulip#973
@gnprice
Copy link
Member

gnprice commented Mar 3, 2025

Thanks for the revision! Looks good now; merging.

@gnprice gnprice merged commit 46a8cdb into zulip:main Mar 3, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
integration review Added by maintainers when PR may be ready for integration
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tweak dark theme for slightly higher contrast
5 participants