Skip to content

style: Set correct dark-theme message background color #1715

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

loveucifer
Copy link

Fixes #1685.

The DesignVariables.bgMessageRegular color was slightly incorrect in dark mode. The previous value, const HSLColor.fromAHSL(1, 0, 0, 0.11).toColor(), resulted in a background color of #1C1C1C, which created a noticeable contrast with the main background. This value might have been a legacy from a previous design iteration.

The Figma design clearly specifies #1D1D1D for the bg-message-regular variable in dark mode. This change updates the value to match the design specification, ensuring a consistent and uniform background for messages.

Before
unnamed-2

After
unnamed

@gnprice
Copy link
Member

gnprice commented Jul 18, 2025

Thanks. Can you post a pair of screenshots that are as similar as possible except for your change? With the current screenshots it's difficult to tell what's caused by your change, because all the content in the screenshots is different.

Using Flutter's hot reload:
https://docs.flutter.dev/tools/hot-reload
it should be possible to switch quickly back and forth between the "before" and "after" versions of the code, without leaving your place in the running app. That should make it possible to get pretty much the exact same shot in both "before" and "after".

@gnprice
Copy link
Member

gnprice commented Jul 18, 2025

For the backstory in the description, see the comment I just posted on the issue: #1685 (comment)

@gnprice
Copy link
Member

gnprice commented Jul 18, 2025

These before/after screenshots would also benefit from going into a table. See Zulip's contributor docs here:
https://zulip.readthedocs.io/en/latest/contributing/reviewable-prs.html#demonstrating-visual-changes

@loveucifer
Copy link
Author

thanks , I hope this solve it
before
BEFORE
after
AFTER

@loveucifer
Copy link
Author

I Also had some doubts on the assigned tasks , i saw some of them that were labelled beginner friendly were assigned to someone else , so am i not allowed to work on it ?

@gnprice
Copy link
Member

gnprice commented Jul 22, 2025

Thanks, that pair is a lot better.

I'm still not seeing the difference visually, though. Do you? Can you point out specifically where you see it? Your description says:

which created a noticeable contrast with the main background

and

ensuring a consistent and uniform background for messages

but I'm not seeing how the actual effect on the app (as shown in the screenshots) lines up with those descriptions.

(BTW using a table would still help. Please do read the doc I linked to at #1715 (comment) above.)

@gnprice
Copy link
Member

gnprice commented Jul 22, 2025

I Also had some doubts on the assigned tasks

For questions that aren't about this PR, a chat thread will be a better place for discussion than this PR's thread. See our guide on using chat.zulip.org:
https://zulip.com/development-community/

@loveucifer
Copy link
Author

I think I may have send the wrong screenshots let me just work back on this and will update ya

@loveucifer
Copy link
Author

actually are the changes that drastic? I thought fixing this only required changing this and as u said the changes aren't that big , I might have been on the wrong when I sent a pr saying"--which created a noticeable contrast with the main background
and"ensuring a consistent and uniform background for messages"
I referred the screenshot in #1685 and thought that this should be darker and didn't confirm it well when I sent the PR are there additional lines of code that require change?

bgMessageRegular: const Color(0xFF1D1D1D),

@chrisbobbe
Copy link
Collaborator

To see what's controlled by bgMessageRegular, try making it something like Colors.pink, just temporarily, and look for something pink on the screen.

@loveucifer
Copy link
Author

oh okay thanks for the reply will try this

@loveucifer
Copy link
Author

hey @chrisbobbe thread could u help me with this

@chrisbobbe
Copy link
Collaborator

Your link is pointing to a resolved topic that looks unrelated (mobile-dev-help > toggle dimensions)

@loveucifer
Copy link
Author

Your link is pointing to a resolved topic that looks unrelated (mobile-dev-help > toggle dimensions)

cant believe i keep making these simple mistakes heres the link - https://chat.zulip.org/#narrow/channel/516-mobile-dev-help/topic/DesignVariables.2EbgMessageRegular.20is.20slightly.20wrong.20in.20dark.20m/with/2226778

@loveucifer loveucifer closed this Jul 26, 2025
@loveucifer loveucifer deleted the fix-dark-theme-message-background branch July 26, 2025 05:26
@loveucifer loveucifer restored the fix-dark-theme-message-background branch July 26, 2025 05:26
@loveucifer loveucifer reopened this Jul 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

DesignVariables.bgMessageRegular is slightly wrong in dark mode
3 participants