Skip to content

Tweak dark theme for slightly higher contrast #973

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.

Sign up for GitHub

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

Jump to bottom
Closed
gnprice opened this issue Sep 30, 2024 · 7 comments · Fixed by #1213
Closed

Tweak dark theme for slightly higher contrast #973

gnprice opened this issue Sep 30, 2024 · 7 comments · Fixed by #1213
Assignees
@Gaurav-Kushwaha-1225
Labels
a-design Visual and UX design help wanted
Milestone
M5a: Launch blockers

Comments

@gnprice
Copy link
Member

gnprice commented Sep 30, 2024 •
edited by PIG208
Loading

Our colors in dark theme are based on those in web. The dark theme in web is getting adjusted to have slightly higher contrast, and we should follow. Details:

For mobile, the specific design from @terpimost can be found here:
https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4514-33396&t=bMNXsr5LwkrHz4dp-1

@terpimost would you suggest using the exact same values for these in mobile as in web? Or would you prefer to update things in the mobile Figma doc?

Related (but independent) PRs/issues
@gnprice gnprice added the a-design Visual and UX design label Sep 30, 2024
@gnprice gnprice added this to the Beta 4: Fall 2024 milestone Sep 30, 2024
@IfeanyiSam

This comment was marked as outdated.

Sign in to view
@donnywellson

This comment was marked as outdated.

Sign in to view
@donnywellson

This comment was marked as outdated.

Sign in to view
@gnprice
Copy link
Member Author

gnprice commented Oct 7, 2024 •
edited
Loading

I've just updated the issue description with the design freshly provided by @terpimost, so it's possible now to work on this issue.

outdated replies

@donnywellson assigning to you; please go ahead. I'm not sure we'll want to merge rearrangements to the theme code; but as long as you keep them in separate commits, following our style for clean and coherent commits, that won't get in the way of reviewing your main changes.

@IfeanyiSam please take a look at our guide for claiming an issue:
https://zulip.readthedocs.io/en/latest/contributing/contributing.html#in-other-zulip-repositories

@PIG208 PIG208 linked a pull request Oct 8, 2024 that will close this issue
Tweak dark themes into a higher contrast #991
Closed
@chrisbobbe chrisbobbe mentioned this issue Oct 8, 2024
Closed
@gnprice gnprice mentioned this issue Nov 1, 2024
Closed
@gnprice gnprice modified the milestones: M4: Wider beta, M5: Launch Dec 11, 2024
@Gaurav-Kushwaha-1225
Copy link
Contributor

Hi @gnprice,
Can you please assign this issue to me.
I have understood the issue from my side i.e., the various changes in dark theme contrast have to be implemented one by one.
Keeping them in separate commits while updating and refactoring the theme related code.
Thank you.

Merged
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this issue Jan 8, 2025
@Gaurav-Kushwaha-1225
theme: Update theme variables for tweak dark theme
139d4e5 
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
@gnprice gnprice modified the milestones: M5: Launch, M5-a: Server 10 Jan 14, 2025
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this issue Jan 28, 2025
@Gaurav-Kushwaha-1225
theme: Replace senderName & recipientHeaderText with title
df8438c 
Removed `senderName` & `recipientHeaderText` from
`MessageListTheme` and used `title` in place of it
as per the design guidelines.
discussion: zulip#1213 (comment)

Fixes: zulip#973
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this issue Jan 28, 2025
@Gaurav-Kushwaha-1225
theme: Replace dateSeparatorText and messageTimestamp with `label…
bc6fc7d 
…Time`

Removed `dateSeparatorText` & `messageTimestamp` from
`MessageListTheme` and introduced `labelTime` in place of it
as per the design guidelines.
discussion: zulip#1213 (comment)

Fixes: zulip#973
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this issue Jan 28, 2025
@Gaurav-Kushwaha-1225
theme: Replace senderName & recipientHeaderText with title
82859ad 
Removed `senderName` & `recipientHeaderText` from
`MessageListTheme` and used `title` from `DesignVariables`
as per the design guidelines.
discussion: zulip#1213 (comment)

Fixes: zulip#973
Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this issue Feb 1, 2025
@Gaurav-Kushwaha-1225
theme: Replace dateSeparator with foreground
2a11eec 
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 issue Feb 3, 2025
@Gaurav-Kushwaha-1225
theme: Replace dateSeparator with foreground
089d03b 
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 issue Feb 3, 2025
@Gaurav-Kushwaha-1225
theme: Replace dateSeparator with foreground
06a5138 
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 issue Feb 8, 2025
@Gaurav-Kushwaha-1225
theme: Replace dateSeparator with foreground
f81f39d 
Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=vu2wWOBiVb0BB6Vz-0
discussion: zulip#1213 (comment)

Fixes: zulip#973
@bishwathakur
Copy link

@Gaurav-Kushwaha-1225 whats the status of this issue Gaurav, Any help needed if yes, We can work on it together.

@Gaurav-Kushwaha-1225
Copy link
Contributor

@Gaurav-Kushwaha-1225 whats the status of this issue Gaurav, Any help needed if yes, We can work on it together.

Hi @bishwathakur,

Thanks for reaching out. A PR #1213 addressing this issue is currently under integration review under one of the core maintainers.
The issue has been resolved for now, though there might be some minor changes, such as commit message updates, if required.

Gaurav-Kushwaha-1225 added a commit to Gaurav-Kushwaha-1225/zulip-flutter that referenced this issue Feb 13, 2025
@Gaurav-Kushwaha-1225
theme: Replace dateSeparator with foreground
89c18a6 
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.

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 issue Feb 20, 2025
@Gaurav-Kushwaha-1225
theme: Replace dateSeparator with foreground
4279c6e 
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.

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 issue Feb 20, 2025
@Gaurav-Kushwaha-1225
theme: Replace dateSeparator with foreground
aee7e68 
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.

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 issue Feb 22, 2025
@Gaurav-Kushwaha-1225
theme: Replace dateSeparator with foreground
fb30dd0 
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 issue Feb 22, 2025
@Gaurav-Kushwaha-1225
theme: Replace dateSeparator with foreground
91bd479 
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 issue Feb 27, 2025
@Gaurav-Kushwaha-1225
theme [nfc]: Replace dateSeparator with foreground
de781cd 
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 issue Feb 27, 2025
@Gaurav-Kushwaha-1225
theme [nfc]: Replace dateSeparator with foreground
baef2c7 
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 issue Feb 27, 2025
@Gaurav-Kushwaha-1225
theme [nfc]: Replace dateSeparator with foreground
9ae39ae 
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 gnprice closed this as completed in 46a8cdb Mar 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Gaurav-Kushwaha-1225 Gaurav-Kushwaha-1225

Labels
a-design Visual and UX design help wanted
Projects
Flutter app
Status: Done
Milestone
M5a: Launch blockers
5 participants
@gnprice @donnywellson @Gaurav-Kushwaha-1225 @IfeanyiSam @bishwathakur