Most Designers Can't Light/Dark Mode - Can you?

All right. So, take a look at this design. This is one of the designs we've been using in our challenge series, the 30-day AI native design challenge series, and it's dark mode, right? Well, for today's challenge, I'm going to be asking you to convert that to a light mode version here in Figma by hand without the help of AI. Now, AI wouldn't even do a good job, which is why you still need some of these handdriven, eyriven, you know, skills. So, I'm going to show you how to do this in a different project. This is from my 2026 Figma crash course. This case, it's a dark mode version, and I'm going to show you how to make a light mode version. And then your challenge at the end is to take that design I just showed you and submit it as a part of the 30-day UI AI design series right here. So, I'll show you how to do that at the end. All right. So, when you take a design and you're trying to, you know, create different color schemes, in this case, it's going from dark to light. It's essentially about starting big and then working your way down to small details and ensuring that you have good proper contrast especially on type and in and in this case if it's going to be a light and dark mode version you want to really make sure that I it it's cohesive and it makes sense. So let me show you what I'm talking about. The first thing I would do to convert this to a light mode design um is take the fill. Notice here I have a gradient in this particular fill. So I'm going to start with like the top color at the very top. Now notice where it's at on the color picker. It's down here. It's dark. It's desaturated. It has some color. So if we go right up around here, this might actually be pretty decent. So I'm going to take that color code. We'll use this as a starting point. I'm going to also specify at the very end the last color picker or color stop. And then in the middle we have this real dark area, but again we want it to be lighter. So I'm just going to paste in the same value and we just drag it down slightly because we have like this backdrop and that's it. You don't want a huge difference. Now, real quickly, the one thing that's going to really almost complete the design is by taking, you know, the entire frame, going to selection colors, and you'll see anything that's white or light like that, you're going to be taking it the opposite direction. Ah, so now we're getting a lot closer. Now, I'm noticing some other type like this tiny type right here. You can barely see it. Again, I'm just going to go the opposite direction down here. Ah, okay. So, now we're actually making some changes. Notice like these strokes right here. I would just do the opposite idea. Maybe even make them white or grab the color that's behind them. Maybe get it a little bit lighter. I think that'll work right there. All right. What else? What about the shadows? These shadows are horrendous, right? So, I'm just going to open those up and I'm going to select them. And so, we have three different shadows. This right here, we're going to make this much lighter. So, what I'll do is probably just grab the background color it's sitting on. All right. And then pull it down. Now, one thing I'll do to make this easier is hide the other two shadows so we can only see the shadow that we're working at. Yeah, that looks like crap right now. All right. So, what I'll do is take this color stop. This needs to be the same um background color over here. So, I'll hit I change that back to 0%. All right. Go back to this color picker. And that actually looks pretty good like right around there. So I'll copy that color code. We'll bring back one of these here. I'll make that adjustment real quick. All right. And that looks pretty good right there. So then I'll go ahead and lock this. We'll take this element. Notice how it has like a dark stroke. Again, these fine details, you want to uh make sure that you have them adjusted. So let me just grab up here and maybe we'll go slightly lighter. Nothing too crazy. All right. So, that's kind of cool looking for now. Now, if I scroll down, what else? Okay. So, this was supposed to be a watermark in the background. You could leave it like that. Um, there's nothing saying you can't, but let me just lock this top element. So, we can grab that. And again, I'm going to be coming back up here. Now, I'm going to grab the background color, and we'll just pull it down slightly darker. Finally, we have this text over here. Again, we could just make that black. And unless I'm missing something, I'm going pretty quick here. This is actually pretty decent. So, this would be a pretty good one to one copy or of a light mode version of this design right here. All right. So, there we go. That's essentially how you have to tackle it. So, let me show you your challenge as a part of this series. All right. So

we've already worked with this design a couple times throughout this challenge series. So, what your challenge now is to take to do is to take this actual layout and create a light mode version out of it and see if you can do it. Um, here's the instructions. Very simple. Just convert this design to a light mode version. Ensure the topography contrasts well with good readability everywhere. And then only modify colors and their values. Don't actually change the layout structure. So, I'm interested to see how you approach this in terms of, you know, your ability to change colors and to create a light mode version. Of course, uh, in order to submit your entry, you just go here, create your free account, and then share your Figma link. Um, and then also just do a screenshot and upload that, too. And I'm I'm excited to see how you all approach this. I because it's not going to be as straightforward as many of you think. There's going to be a lot of issues that some of you probably run into. And so, that's why I'll be doing reviews on the initial ones. And yeah, make sure to sub submit here. In the future, we're working um we're completing this series by doing a lot of handdriven skills because it's abundantly clear that even with AI and some of the best AI design tools, um you're a lot of you are still producing design that is very obviously subpar from like a professional designer standpoint. So, we really need to work on the hand skills here through the remainder of this uh challenge series. So I will see you soon and goodbye.