ui: Make some dark-theme adjustments from Greg's feedback #955
Conversation
chrisbobbe
added
the
integration review
|
Home page (light theme affected too because it was convenient to just plug in a light/dark pair of colors that comes from Material):
Error style (light theme unchanged):
Dot for muted unreads (light theme unchanged): The way this looks, I think it might not be an improvement, actually. The color matches what gets used on web, but it ends up with pretty low contrast because the background color differs between mobile and web. But also, like many UI elements that currently follow web, this is something we'll revisit once we have a design from Vlad.
|
|
cc @alya in case you'd like to take a look. |
|
Works for me, thanks! |
lib/widgets/app.dart
Outdated
| ])), | ||
| )); |
There was a problem hiding this comment.
nit:
| ])), | |
| )); | |
| ])))); |
lib/widgets/theme.dart
Outdated
| @@ -158,6 +159,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> { | |||
| groupDmConversationIconBg: const Color(0x33cccccc), | |||
| loginOrDivider: const Color(0xff424242), | |||
| loginOrDividerText: const Color(0xffa8a8a8), | |||
| mutedUnreadBadge: const HSLColor.fromAHSL(0.5, 0, 0, 0.3).toColor(), | |||
There was a problem hiding this comment.
This is pretty low-contrast in dark mode, but as with many of our UI
elements, we'll adjust as necessary when we have a design from Vlad.
From the screenshot, this gets pretty hard to see. It's good to have this properly wired up into DesignVariables, but I think the existing value that's the same as in light theme actually works out better.
Let's maybe just make this the same value (with 0.8 lightness) as for the light theme, and leave a // TODO(design-dark) for it. Or spend a minute or two trying values in between like 0.6, and pick something that looks clear.
chrisbobbe
force-pushed
the
pr-dark-theme-stragglers
branch
from
3a70e61 to
ace3e99
Compare
|
Thanks! Revision pushed. Here's the before-and-after for
|
This seems like the preferred way to use the API.
An improvement that Greg pointed out: https://chat.zulip.org/#narrow/stream/48-mobile/topic/dark.20theme/near/1936853 This makes them the same color as the third-party login buttons, in 7c9c894.
Prompted by Greg's feedback that the dark-theme color was pretty dark: https://chat.zulip.org/#narrow/stream/48-mobile/topic/dark.20theme/near/1936853
Thanks to Greg for the reminder that this needed attention: https://chat.zulip.org/#narrow/stream/48-mobile/topic/dark.20theme/near/1936853 Web, in `main`, uses hsl(0, 0%, 30%) with 50% opacity. We tried using that, but it ended up with pretty low contrast, given the different background it's on here in mobile. So, this ad hoc value, until we have a design from Vlad. Web's light and dark colors might both actually change soon, with the in-flight PR zulip/zulip#31847 that's test-deployed on CZO. But not by much, and not enough to fix the low-contrast issue for us in dark theme. I think the intended change is just to bump the opacity from 50% to 55%. So we might refresh the light variant after that PR is merged, and in any case will refresh both once we have Vlad's design.
|
Thanks! Looks good; merging. |
gnprice
force-pushed
the
pr-dark-theme-stragglers
branch
from
ace3e99 to
69ac00c
Compare
This addresses all the remaining items in the CZO thread at https://chat.zulip.org/#narrow/stream/48-mobile/topic/dark.20theme/near/1936853 .
Screenshots coming soon.