-
Notifications
You must be signed in to change notification settings - Fork 289
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
Tweak dark theme #1213
Conversation
Please clean up your commit history and post again to request a review. See here for guidelines. |
525b063
to
3af0d2e
Compare
I’ve cleaned up the commit history by removing unnecessary merge commits into the This is my first time using Apologies for any confusion. Please review the updated PR. |
The |
Thanks! I'll let other folks take a look at this one. |
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 |
076d0de
to
139d4e5
Compare
There was a problem hiding this 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,
Adjusted the colors for `foreground` in `DesignVariables` and `dateSeparator` in `MessageListTheme` as asked. `foreground`: zulip#1213 (comment) `dateSeparator`: zulip#1213 (comment)
Added `labelTime` variable in `MessageListTheme` that replaces the `dateSeparatorText` and `messageTimestamp` variable according to the latest design. `labelTime`: zulip#1213 (comment)
9c71065
to
139d4e5
Compare
Adjusted the colors for `foreground` in `DesignVariables` and `dateSeparator` in `MessageListTheme` as asked. `foreground`: zulip#1213 (comment) `dateSeparator`: zulip#1213 (comment)
Added `labelTime` variable in `MessageListTheme` that replaces the `dateSeparatorText` and `messageTimestamp` variable according to the latest design. `labelTime`: zulip#1213 (comment)
Adjusted the colors for `foreground` in `DesignVariables` and `dateSeparator` in `MessageListTheme` as asked. `foreground`: zulip#1213 (comment) `dateSeparator`: zulip#1213 (comment)
Added `labelTime` variable in `MessageListTheme` that replaces the `dateSeparatorText` and `messageTimestamp` variable according to the latest design. `labelTime`: zulip#1213 (comment)
56f8fdb
to
2a11a43
Compare
Added `labelTime` variable in `MessageListTheme` that replaces the `dateSeparatorText` and `messageTimestamp` variable according to the latest design. `labelTime`: zulip#1213 (comment)
2a11a43
to
ce64ca5
Compare
Adjusted the colors for `foreground` in `DesignVariables` and `dateSeparator` in `MessageListTheme` as asked. `foreground`: zulip#1213 (comment) `dateSeparator`: zulip#1213 (comment)
Added `labelTime` variable in `MessageListTheme` that replaces the `dateSeparatorText` and `messageTimestamp` variable according to the latest design. `labelTime`: zulip#1213 (comment)
ce64ca5
to
c6aca86
Compare
Removed `colorMessageHeaderIconInteractive` from `DesignVariables` and used `title` in place of it as per the design guidelines. discussion: zulip#1213 (comment)
Removed `senderName` & `recipientHeaderText` from `MessageListTheme` and used `title` in place of it as per the design guidelines. discussion: zulip#1213 (comment)
Adjusted the colors for `foreground` in `DesignVariables` and `dateSeparator` in `MessageListTheme` as asked. `foreground`: zulip#1213 (comment) `dateSeparator`: zulip#1213 (comment)
Added `labelTime` variable in `MessageListTheme` that replaces the `dateSeparatorText` and `messageTimestamp` variable according to the latest design. `labelTime`: zulip#1213 (comment)
aee7e68
to
fb30dd0
Compare
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)
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
fb30dd0
to
91bd479
Compare
Hi @gnprice,
|
There was a problem hiding this 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.
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
91bd479
to
de781cd
Compare
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
de781cd
to
baef2c7
Compare
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
baef2c7
to
9ae39ae
Compare
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
Thanks for the revision! Looks good now; merging. |
About Changes
This PR updates the color variables in
DesignVariables
andMessageListTheme
for a slightly higher contrast in dark theme according to the values in the figma file.Fixes: #973
Screenshots