Skip to content

Conversation

loveucifer
Copy link

@loveucifer loveucifer commented Sep 28, 2025

theme: Fix bgMessageRegular to match Figma specification

The dark mode bgMessageRegular color was defined as
HSLColor.fromAHSL(1, 0, 0, 0.11), intended to match the
Figma design specification
of #1D1D1D. However, the implementation was slightly darker
than the design.

The HSL lightness value of 0.11 corresponds to RGB 28 (0.11 × 255),
while the target hex value 0x1D corresponds to RGB 29. This
one-value difference is subtle but visible when comparing code
blocks side by side as seen on the image

This pr updates the color to const Color(0xff1d1d1d) to precisely
match the Figma design, ensuring visual consistency with the
design system.

Before After
before after

Fixes #1685.

@chrisbobbe
Copy link
Collaborator

#1715 (comment)

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".

@chrisbobbe
Copy link
Collaborator

Also please format your commit message according to the project style: https://github.com/zulip/zulip-mobile/blob/main/docs/style.md#git-commits-commit-messages

@loveucifer
Copy link
Author

#1715 (comment)

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".

also a review on this please i think i recently solved some conflicts as well which occurred #1759. thanks

@chrisbobbe
Copy link
Collaborator

also dont know why this was marked as spam :/

It takes up a lot of vertical space, so it's annoying to scroll past. Instead of posting new messages, please update the pair of screenshots in the issue description, making them identical except for the change you're asking us to review. We've asked you multiple times already and suggested an easy way to do this, with Flutter's "hot reload" feature. It's important in this case where the change is so subtle and easy to miss in the noise.

Currently there are irrelevant differences:

  • Topic narrow vs. channel narrow
  • Unread marker present vs. absent on a message

@loveucifer loveucifer changed the title Fix dark mode bgMessageRegular color to match Figma design theme: Fix bgMessageRegular to match Figma specification Oct 7, 2025
@loveucifer loveucifer force-pushed the fix-dark-mode-bg-color branch from 9a5d843 to 9531863 Compare October 9, 2025 00:29
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
2 participants