Auto-generated transcript Alright, this is going to be a quick one. We're just going to talk about how to design the perfect dark mode interface for your app. Now, most designers suck at this. Alright, most designers don't know how to create a good dark mode interface. So, we're going to cover four major tactics that you can use to create or improve your current dark mode interface for whatever website or app that you're currently building. Alright? So, I have this quick little project here that I just hacked together with a couple of components. and we're going to go through them and I'm going to explain these four tactics and how they work and how I've applied them to these components and how you can do the same for your application. So I've already started this. Now let's open this up. So this you can see over here this is just a very simple dark mode interface right. We're going to go through everything that I did over here and then we're also going to look at another component completely different from this one and see what I did over there as well. So most designers think that they can just invert the colors and call it a day, right? They think, okay, we're using pure white as the background. If I just use pure black as the background in my dark mode interface, that's basically all done, right? That is not the case. You can't just naively invert the colors and call it a day. So you can see over here that this is a pretty decent dark mode interface. And you can probably tell I'm not using pure black as the background here, right? And that's the first tactic that I want to discuss. You do not want to use pure black as your background or pure white as the text. You can use pure white as the text, but you don't want to use pure black as the background. Why? Because pure black and pure white have such a harsh contrast that it's just unpleasant to look at, unpleasant to read. So this is not pure black. This is a shade of gray, basically. And I'm going to show you what happens if I if I instead just use let's say pure black instead of this gray 900 color right let's instead use pure black and you'll see it looks much more horrible so okay that just changed the sidebar but you can see it already looks so much worse right if I go over here and change the where is it change the actual background of the content as well down here and you set this to black looks horrible that doesn't it it's worse to read it's not good to read it's unpleasant it's just horrible right so let's change that back so this is the first tactic that I want to cover you do not want to use pure black as the background for your page or your elements because the contrast will be too strong and it will just be harsh and unpleasant to read So that the first tactic Alright, use a dark shade of gray for the background because that's just easier on the eyes. It's much more pleasant to look at and read. Do not just use pure black. Alright, don't fall into the trap of naively inverting your colors going from pure white to pure black and stuff. Do not just naively invert your colors and call it a day. use a dark shade of gray instead of using pure black for the backgrounds. That's the first tactic. Secondly, what I want to talk about is the icons over here. So when you're designing a dark mode interface, you want to really pay attention to the contrast between the background and the foreground. And the thing with icons is they can have, especially if you're using heavily outlined or filled icons, they can have some really strong contrast against the background. And we want to avoid things like that in dark mode interfaces. So you can see over here. I'm only using outlined icons I'm not using filled icons over here All right, and that's the major key here if you're using a light mode interface filled icons can make sense But if you're using a dark mode interface Generally, you should avoid using heavily outlined or heavily filled icons All right, try to just use outlined icons like the ones I'm using here and even in these outlined icons I'm not using pure white as the text color. You can see over here. This is where I'm rendering the actual icon You can see that even in the dark mode interface. I'm using the gray 300 color. I'm not using pure white So it's very similar to typography, right? We want to lower the contrast and the way to do that is to just use Outlined icons instead of filled icons or very heavily filled icons, right? We want to use outlined icons in dark mode interfaces That was the second tactic. Now the third tactic that I want to show you is related to images and how we can render the images in dark mode. So for that I need to head into the other component that I have over here. I'll comment this and render this skeleton parts component. And what I want you to focus on is these images over here right. So this is just a bunch of random courses over here and this is the image for each course. Now I'm doing some very subtle changes to these images. I'll show you what I mean. If I go up here where I render the images, you can see that, and we don't need this, but you can see that in the dark mode, what I'm doing is I'm lowering the brightness a bit and increasing the contrast a little bit, right? And setting the contrast to 1 and decreasing the brightness of each image to 0 right And the reason I do this is because if you using super bright images on a super dark background it just not going to look good right it just not going to look good it the contrast will be too strong similar to what we talked about in typography just now the contrast we want to make sure that the contrast is really like pleasant to look at we don't want super super strong contrast that's not just as unpleasant to look at we want to avoid things like that So the thing I do with images over here is I simply lower the brightness and increase the contrast a little bit over here Which just helps to make them more comfortable to look at in a dark mode interface if I instead remove these filters There we go. I save this You'll see that they get a lot brighter, right? And it's a very subtle change, but it just it's just one of those things that adds up into a really great design, right? if I go back and add that you can see it gets a bit darker and it just looks a bit better right it looks like it actually fits on this dark mode interface right and on a completely different side note it's small changes like these that when you look at them in the context of a whole UI that's when they all add up and compound into this huge amazing elite design right it's just hundreds and hundreds of tiny, tiny improvements like these that when you look at them in the context of a whole UI, that's when you see and you realize that this is a really elite UI. But it's not the product of one major thing. It's more like hundreds and hundreds of tiny changes that we made similar to these that just add up into that elite UI. So I hope I'm making sense here. But basically what you want to do is you can have these bright images on uh where am i you can have those bright images on light mode if i go over here and turn on light mode in my computer see this looks fine right these images look fine right now but if i open up dark mode instead now they're not so well you it's a very subtle change again i don't blame you if you don't notice it but if you just add these filters over here they just look so much better on a dark mode interface don't they so that's the third tactic that I want to cover and finally the fourth tactic is something I've already shown you but not really talked about it's to use the prefers color scheme media query in CSS to automatically set the correct color theme for each user so you saw that I changed my color team to light right And the UI automatically updated right That what i talking about here if i where is it if i go back over here and show you that um tasks list again see how it's automatically showing it to me in light team that's what i'm talking about so if i go back over here and change it to dark mode it's gonna show up the dark mode ui and that's we want to build here we want to use the prefers color scheme media query which i'll show you over here this is a special media query in css that will just check what the like the default color theme is at the operating system level so i'm on windows right now and my color theme is set to dark right this media query is going to give me the value dark and then i can use that to design the dark mode interface right and this is how you actually use this media query in css right you want to use media prefers color scheme if it is dark then you just use the dark mode styling for your like elements right now i'm using tailwind so what i can do is just i can add this dark pseudo class over here right here and then just add the styling right so this is kind of a shorthand if you're using tailwind but the yeah the CSS version is the same you just use media prefers color scheme and dark and then you just add the dark mode styling so this is super important because this way your user doesn't have to go and manually switch the color teams right if they if they prefer a dark mode then you can give them a dark mode automatically if they instead prefer a light mode which i don't know what kind of person prefers light mode but if they do that you can give them the light theme automatically so always make sure to use this media query because it's just it's just a free win for your user experience right you want to you want to improve the user experience as much as possible and this is just a very simple and easy and quick way to do that right we want to reduce the effort that our users have to put in to use our website and this This is just one way we can automatically improve the user experience, automatically make the experience better for them. So make sure you do this as well. And yeah, that's all for tactics covered. Apply all of these at whatever dark mode interface you're designing right now and I guarantee it's going to look a lot better than it is now. That's all for today. Like if you like the video, subscribe if you want to. Check out my website, link in the description if you want to work with me or something like that. And yeah, that's all. all thank you for watching and bye bye