How to Easily Swap Logos Between Dark & Light Mode (Bricks Builder)

0:00:00
Designing websites to use color scheme, where you can switch between dark mode and light mode, super popular these days. And actually, it is a good benefit to users. If users prefer a dark scheme, when they use applications or websites, serving them that dark scheme aligns with their preferences. And then if they prefer a light scheme,

0:00:20
serving the light scheme aligns with their preferences. But this does present a lot of technical challenges. Okay, the first thing is we’ve got to be able to switch the colors. That requires a whole kind of color system approach. The next thing that we have to do is decide whether we’re going to respect their browser preferences by default or really their operating system preferences by default or if we’re just going to give them a manual toggle switch or both. Okay, I’m not going to go into all of the technical details of dark and light mode but I am going to address one challenge in this video, and

0:00:54
that is with handling image files. Specifically, most commonly, the logo of the website. So what I’m going to show you right here, this is a site that I whipped up very quickly in frames and automatic CSS, not even really a website, it’s just a couple sections, but it does give us the opportunity to see what happens when dark mode and light mode are designed into a website. We have a manual switch and we also have a situation where we are respecting the user’s operating system preferences. But you are going to see one problem here and that is that the logo does not switch.

0:01:31
Everything is going to switch just fine, the logo does not switch. So what I’m going to do is I’m going to activate that switch right here and you see that we get a dark mode and this in automatic CSS is not an algorithmic dark mode it’s not like an automatic dark mode it’s a 100 customizable dark mode so these are color choices that I made now I made them in five seconds but these are color choices that I made for the dark mode version of this website you can make them whatever you want in fact it’s not just dark and light. You could even just completely switch the color scheme altogether. But that’s neither here nor there.

0:02:08
We have to talk about this situation happening up in the left-hand corner right now, which is the fact that that logo, which looks great on a light scheme does not look good at all on a dark scheme. Now, there are multiple ways to approach this, and we are going to, you do need to understand some of the technical side of this. So I’m gonna walk you through it, I’m gonna try to make it as easy as possible, and then I’m gonna show you exactly what I feel

0:02:34
is the best solution in a scenario like this, where we are respecting the operating system preferences, but we’re also offering a toggle switch, okay? Now, when you use a toggle like this, typically what’s happening is we’re saving the user’s preference because this is a new preference that they have. They’ve used the toggle selecting a preference here. We store that in the browser’s local storage.

0:03:00
I’m going to show you how to use the inspector to go into the application tab and I’m going to make this bigger for now. I’m going to find over here on the left-hand side, the local storage area and you’re going to see the instance right here. You’re going to see that in terms of our scheme switcher and again There’s many ways to implement this so you’re gonna figure out you’re gonna have to figure out How is it implemented on my website or if you implemented it yourself you probably already know But if you’re using another system, you’re gonna have to figure out how it was implemented

0:03:30
But you can see that the ACSS color scheme is set to light Okay, what I’m gonna do is I’m going to clear all of what is in the local storage Which means there is no preference on this website right now now an automatic CSS in the color palette area You’re gonna see that I have auto color scheme. Can you guys see that? Yes, my head is on the correct side today Okay, auto color scheme is turned on which means we are respecting the operating system preferences of the user So what I’m going to do is I’m going to open my system settings and you’re going to see that I have some different appearance modes. If I select dark, the application window turns dark. Now if I reload the website using

0:04:12
automatic CSS, you’re going to see that it loads the dark version of this website. Now if I go back and I select the light preference in my operating system, application window turns white. I refresh the page. I am now served the light version of this website. So with automatic CSS, with that automatic color scheme switching, we are by default respecting the user’s operating system preferences

0:04:37
when they visit this website. When you bring the toggle into the mix, that’s gonna add some additional layers of technical complication here, okay? What I’m gonna show you is, if all you’re doing, if you don’t have a toggle switch, okay, so pay attention, if you don’t have a toggle switch, if you’re just respecting the user’s preferences, there’s an easy way to manage this and you can do it very easily in Brics. So I’m going to go edit with Brics and really I need

0:05:06
to be editing my header. So I’m going to go to my header file right here and I’m going to grab this logo, okay, we’re going to open the structure panel, I’ll select the logo. Notice that I have two files here, okay? The one that I want as my default is selected. But what I’m gonna do is I’m gonna come down here and I’m gonna switch the HTML tag from figure to picture. Now, let’s just be clear about this. This is only for if you’re not deploying

0:05:30
a manual toggle switch, okay? If you’re just doing the automatic color switching thing with use like the operating system preference, this is the route you want to go. So I’m going to hit Add Source, and then I’m going to do Custom Media Query. Now, what we’re doing here is the picture tag allows you to swap the source of a picture or really an image,

0:05:53
depending on specific contexts. It could be a media query like the browser size, or it could be a custom media query like prefers color scheme. Now if I say light, which is our normal, that’s our default, that’s what we designed the site in, I am going to give it, it’s gonna ask you now, what image do you wanna serve if it’s light?

0:06:17
Okay, so here we go, we’re serving the dark image if it’s the light scheme. Now what I need to do is add another source and I’m gonna say again, custom media query and now I’m going to serve the light scheme or the I’m sorry the light logo and this is if they prefer a dark scheme. So we’re going to say prefers color scheme. Notice I’m writing this in parentheses because that’s how this needs to be output in the HTML and I’m going to say dark.

0:06:43
So if they prefer the dark color scheme we’re going to serve them this light logo. If they prefer the light scheme we’re going to serve them the dark logo. I’m going to go ahead and hit save, and then we are going to hop back over to the front end. Okay, I’m going to go back to the homepage, and then I’m going to bring up my system preferences. I’m going to switch this to dark, application turns dark, I’m going to refresh, and look what we have. We have a light logo immediately on this website, no other shenanigans, very, very, very easy.

0:07:15
Okay, now I’m going to switch this back. So we’re going to go to system settings, light, and then I’m going to refresh and you’re going to see that all is well on our website. So if you don’t have a toggle switch, that is by far the best and the easiest way to manage this. Now the toggle switch enters some complication into the picture, okay? So what I’m gonna do, I’m gonna go back to edit my header, and I am going to remove, undo, essentially what we just did,

0:07:45
because this is not the method that we wanna use when we use a toggle switch, okay? And again, depends on, does your toggle switch also affect or does the way color scheme is set up on your website is it is the switch and the Respecting operating system preferences are they on the same page in automatic CSS they are but not in every system Okay, so you have to make sure you’re using a good system automatic CSS makes this very very very easy. Okay, so what we’re gonna do Is we’re gonna leave this actually as just figure so there’s a normal image Okay

0:08:23
image okay and then what I’m gonna do I have a logo wrapper which is just a container for this logo but I’m able to duplicate the logo inside of that wrapper so now two logos are going to sit side by side and what I’m going to do is I’m going to give one of them the class of logo main like this and then I’m going to give them the other one the class of logo alt now I you don’t have to give I don’t even think we’re gonna need the class logo main, but we do need the class logo alt. And now what I wanna do is I wanna select the alt logo.

0:08:56
Okay, so I’m gonna have a dark logo and a light logo right next to each other. Now, the next thing that we need to know, what is this switch doing? What is this switch doing? So I’m gonna go back to the front end here and I am going to open the inspector. And we are going to watch the HTML or the body tag.

0:09:16
Usually this is where this stuff happens. When I click this switch, and you’re gonna see right there, it added color scheme alt to the HTML tag. Notice the whole scheme of the website just switched. And then when I switch it back, that class is removed. Okay, that class is very important, color scheme alt. So when we are in the alt scheme,

0:09:39
we need to do some special things. Now, we need to use global CSS to do this. It’s very possible we’ll come up with a much easier, almost automatic way in the future to handle this, but right now we’re gonna use just some custom CSS. We’re gonna stay in the alt mode here, and because I can write CSS on the front end in automatic CSS, this comes in super handy.

0:10:03
And so I’m gonna say color scheme alt, right? So what do we wanna do in color scheme alt? Well, first of all, I wanna take our logo main, right? And I’m nesting now, and you can nest in vanilla CSS, kind of, the support’s almost there for it. But this is SAS, and you can always nest in SAS, which is fantastic. But logo scheme alt, logo main

0:10:29
when color scheme alt is active. What am I gonna do to like, this is the main logo right here. What do I need to do that logo in the alt color scheme? I need to make it go away. So I’m just gonna say display is none. So display none. And look, it just disappeared.

0:10:45
I get live preview, okay? I can see exactly what I’m doing. So that part is done. Now the problem is that logo, logo main, is it’s still going to be there on the, when, you know, color scheme all class is not present, which is, which is good. But the problem is when I switch back to main, okay, let’s just hide this panel for a second. We’re going to see both logos, the all like, how are we going to target the alt? Well, this is very simple. Actually, I can just switch back and

0:11:12
we could do it here. Okay, so color scheme, alt, logo main, we’re gonna display none. How about color scheme, actually, how about we just do logo alt. So by default, logo alt is display of none, okay? That should hide it on our main scheme. So like when the website loads, just by default,

0:11:32
the logo alt is display none, it’s gone, right? But if the color scheme alt is present, we are going to hide logo main, but watch what happens now, just showing you what the CSS does. Now we have no logos. Now we have no logos. Why do we have no logos?

0:11:47
Because we are hiding the alt one by default and we’re never telling it when it is supposed to come back. When is it supposed to actually show up? Well, it’s supposed to show up when we have color scheme alt active. So we’re just gonna make another line here and we’re gonna say logo alt and we’re gonna say display of flex. Look there it is. Okay now the true test is when I switch back, aha, now there’s the main, now there’s the alt, okay. Now we have to

0:12:19
check and see is this actually respecting browser preferences. Let me go ahead and save. I’m gonna commit that CSS to the style sheet, okay? And then I’ll hide the panel. Let’s refresh the page, all right? And now what we’re seeing is, why are we seeing, why are we seeing the, oh, I know why. Ran into this problem before. It’s because Bricks adds this, I don’t know why,

0:12:42
I don’t know why. If anybody knows why, ask them. I think it’s completely useless. They add a class called tag, which I don’t even know what that means and the tag is actually set to display inline block and this overrides and it’s set with some specificity it overrides the what I was just doing okay so that’s not good so what we need to do is we need to come in here to our custom CSS and I believe what we’re gonna do is

0:13:09
say logo alt and we’re just gonna add the tag selector to that display none save we have to kind of go one up on the specificity here all right and then we’re going to refresh let’s get rid of our panel check both nice refresh again are we good with multiple refreshes nothing’s coming back nothing no specificity issues hey we look really really really good now but there is one final test that we have to do let me bring our home page back because looking at this giant white screen is not super great. Okay, that’s what we want to see. I mean, look at that. That’s fantastic, isn’t it? Okay. Does it respect user browser?

0:13:45
I always say browser preferences, it’s really the operating system preference. So in order to truly test this, what I have to do is I have to go back to our application. I have to go to local storage because remember, it’s not going to respect the operating system preference when the user has already selected manually a preference for this particular website. So I have to clear out preferences for this particular

0:14:09
website and then we can test and see if it’s going to respect the operating system preferences. So here we are with our clean site. Let’s go ahead and bring back up our operating system preferences. I’m gonna switch it to dark. We’re gonna refresh. All is well in the world. Let’s go ahead and go back and choose light, refresh, all is well in the world. So notice this method that I just used with a little bit of custom CSS. Not really much, just a little bit of custom CSS. Not only does it respect operating system preferences,

0:14:44
it also respects the toggle switch. Let’s go back and just make sure there’s the toggle switch, right? It’s working all as well in the world. Again, I want to reiterate, this depends on how the color scheme was implemented on your particular website. If you’re an automatic CSS user, as you can see, it is what amounts to four or five lines of code or something like that of CSS is going to make this work for you. Using operating system preferences and a toggle switch together, best of both worlds, very, very, very easy to do. Now if you’re using a different color scheme system, I don’t know if it’s going to be that easy and you’re going to have to inspect and see how they approach things in order to kind of

0:15:29
figure out. But it’s probably going to be something along these lines. Alright, now let me go back to camera. Let’s go, yes, back to camera, perfect. That’s it, okay, now, I know people are gonna have questions and I am going to do more videos on how do you even set up an alternate color scheme in the first place with automatic CSS? What does that process even look like? Don’t worry, all of that stuff is coming,

0:15:52
but this is a common, common, common question and a common challenge that people run into, so I wanted to do a video addressing it. If you have trouble with your implementation, drop a comment below. Of course, we have the inner circle where you are able to go in and get all the help you need from myself and the community.

0:16:09
If you’re an automatic CSS user, you have the automatic CSS private community available to you to get help for your specific situation. So the resources are available to you. But what I showed you in this video should get you on the right track, especially if you’re an intermediate or, you know, if you’re an advanced user,

0:16:28
you probably already know how to do this, but if you’re intermediate, you should be able to find your way, even if you’re not using automatic CSS, if you’re using some other toggle switch system, some other color scheme system, hopefully, basically, basically, best of luck to you. All right, thank you for tuning in.

0:16:45
If you like this video, drop a like on it, drop a comment below, helps the algorithm, okay? Love you guys, see you again very, very soon.