Async bug-bash: Dark-mode bugs and fixes overview 🎃👻

Thank you so much everyone for participating in the Polish party related to dark mode, like I mentioned during, during that event.

And like Manda mentioned, we're really hoping to, to launch this feature on Halloween, though there are a lot of bugs.

So definitely gonna have conversations with Manda and team about if that's feasible, especially since whole point is to really make sure we're shipping higher quality features.

That said, y'all filed tons and tons of bugs in addition to the engineering team. So just wanted to kind of summarize like some themes I saw and really would benefit from any additional input.

So, Kim, if you're watching this or really anyone who is familiar with our semantic color system and who has applied dark mode elsewhere, T Loom would love any additional thoughts as I'm kind of jumping in just to really help facilitate the launch here without maybe as much context as I should have.

So I've, I've broken up our ideas into, or sorry, our bugs rather into p zeros and P one s and I've tried to group together basically bugs that, that are similar in nature and that have similar recommendations.

I'm really trying to make sure we apply or we make decisions for dark mode that feel like a system even though we're kind of looking at disparate parts of the product and making calls.

So if you notice inconsistencies here with recommendations, definitely call them out. So the, the first one here is just I think a simple one of like sometimes we have things in the product that are colorful.

I, I think one solution is we could leave the background color as is and make this black to really make sure it still draws someone attention.

The alternative here is that we come up with a semantic color or an alternative color, I should say to this blue that works well in, in dark mode.

Curious what folks think there. I think the easiest option would be to make the text black, obviously. And then this group of screens is all just a similar issue where we need to basically, and actually it's similar to this one.

So do we make this icon black and just leave the background color as is, or do we do it Kevin's suggesting and actually use the highlight color, which is darker in appearance for the, the purple bounding color.

I think in these instances it might actually, like if you look at the transcript as well and this highlight color, I think it actually might make more sense to do what Kevin's suggesting and just to use that highlight color for the circle for this per light purple outline.

And then for the insights here at the top or the, the member's overview rather at the top. And then I think keep that in mind.

So if we made these backgrounds darker in Appearance, what, what would you do here? Would you do that same thing or would you still stick to actually changing the text to be text black?

I think in terms of my preference, I think for all of these I would definitely change the backgrounds to be darker in appearance and like have the, have the text actually be white and the iconography stay white.

I just think it's it respects I think the nature of dark mo dark mode more where there aren't like large surfaces that are bright in appearance, if that makes sense.

Like this is really bright for, for something like dark mode, I think. And then these, the, basically the, the gist of this is the purple is really hard to see here, here, here.

And Kim actually has a suggestion from mobile where they brightened the appearance of basically this purple color across all elements in dark mode.

And I think we should do the same. I'll skip that one. That one's just an obvious bug. This one I think Raji found that, you know, we, we underline but in dark mode for some reason we're underlining in white.

I think we should just underline in purple to match the text link like we do elsewhere. And then the assumption is that we'll brighten all this purple text up like I was talking about and like Kim's suggestion is, is all about.

So that's those, I'll keep going. I'm, I won't say halfway through 'em. I'm, I'm getting, getting there. And then what do we do with, basically this is actually, it's hard to see this is a tool tip.

It's just, it doesn't have, it's black and it, the shadow is really subtle, so it's just, it looks broken. And then here thanks to Kate for showing what it looks like in light mode as well.

Basically the, the square bounding box is invisible because it's, it's black in light mode and it's still black in dark mode.

I think, and this is similar actually to this is similar to something that Brit brought up where the, the tool tips are also black.

So they're, they just look broken, they're hard to see. So I think what we should do for all of these is we should do two things.

We should use the secondary background for basically any bounded text, so like highlighting, so basically when we bound text, like, like we do here for tool tips and for actually that.

That's it. So, and then the other thing is we should apply a dark mode specific shadow for things like like tool tips.

And then here and this is where I think it really helps to think about how we can be most consistent here.

So when thinking about all the other decisions, should we, should we change this text to black? Should we darken these colors?

So use a darker variation of these colors or should we do a Kim suggesting here where we actually flip the, we basically take the bright color out and we make the text itself that bright color.

I'm leaning towards using a darker version of each of these colors and then doing the same here. Maybe we actually reverse these.

That could be something to think about, like if we use the light red as the text color and then the dark red as the background color could be interesting.

And it might be more consistent with some of the, some of the things we identified here where it's like, okay, do we make the background behind this icon darker or, or do we make the icon black?

So just thinking about how these all kind of tie together. And then here, I think this one's obvious Kevin pointed out, we should just make the highlight or hover color darker in appearance.

We should use that semantic color. I forget what it's called. It's either overlay or I'll look it up in a sec.

And then basically here we have different hover states. I think we should just use the purple one for, for all the side navigation items, including the create a space.

Plus I think we'll have to see if this feels better once we brighten the foreground color purple for both the search icon and the browse space's text.

I, I think it will feel a lot better, but right now it feels kind of illegible. That's a hard word to say.

And then this one, it's just we have to use a different color for thumbnails. Sean Goodwin pointed out like, just do a sweep of divider colors and things like the, the searches border is different than the, the other borders that are next to it, such as secondary actions and, and things like that.

So just do a sweep and make sure we use the same border color. And then here, here, I think we just need to revisit the dark mode.

Basically needs to be applied to this table. We need to use the secondary color we use and then the background color for the, the alternate rows.

Almost done. Let's see this one, I think this one actually I'll move this one next to the other one. That's all about shadow.

We just need to apply a dark mode specific shadow. And then this is just, we need to fix this. This is miscellaneous.

We need to fix this whole screen. I can help with that. Amanda. This one I actually have a, a slack message out about, but basically Kim, Kim pointed out this, this feels like it could be better and I definitely agreed.

So move the switch to the right added icons to all the items. Added a moon icon for dark mode, which is part of the larger feather set that I linked to here.

And then This one is just having a basic FTX that introduces the entry point for dark mode. And I'm working with George on the, the the copy for that.

I'll, I'll also reach out to Kyle actually as well. And then these are all the same, just reported this bug where for some reason a lot of elements such as error estates and other form field elements are how getting this like white square background.

So just need to, to address that though. Oh wait, there's two more. We just need to update the nav here.

It's not in dark mode. And then this one, Brit found, this is a really good one to find cuz it's subtle.

The cursor is is black. So we just need to fix that. And then I have, so that was all the, the P zeros, these are the P one s.

Amanda, I know there's a lot of p zeros. I I I'm just worried if we don't fix these things, they're kind of table stakes because people can't see them.

The only P one s I had are maybe we can get away with not adjusting the onboarding checklist since I think it's probably rare that someone has dark mode on and that onboarding checklist is still visible, but that's just an assumption.

I also think the hover state for the emoji picker not changing for now is maybe okay if it's like, it's probably easy to do, but there's just so much stuff.

And then Brit pointed out like the the logos in the workspace switcher as well as within the integration section need to be transparent.

And that's really it. And also there's some bugs that Crystal, thank you so much offered to work with her team on resolving as well.

So let me know if you have any feedback and yeah, hopefully we can get to a place where, where we're all proud of dark mode and we can chip it on Halloween.

And if, if not we'll, we'll, we'll delay shipping.