Number Toggles

[00:00:00]
>> So we spoke earlier about spaced toggles and how we can use these two obscure values to swap between two values. However, there is-, when we want to toggle between numerical values there is a much easier way. Let's look at this example. It's slightly similar to what we've seen previously.

[00:00:22]
We have two blog posts. One of them has a class of dark and the other one doesn't. And the one that has the class of dark has some different CSS applied to it. So that it could look more appropriate for dark mode. Like here and here. However, this requires applying a class, this requires changing the HTML.

[00:00:47]
We want to be able to just change a custom property to be able to toggle between dark mode or light mode for that component. And that way we can decide in our CSS when to enable dark mode for each individual component. We could set it with a media query we could set it with a class we could set it but however we want.

[00:01:11]
So how could we do that? Let's look at the values we have here, so this is white which we could write ours HSL 0, 0, 100%. And here we have black which we can set as 0, 0, 0% because black has zero lightness. And for now I'm gonna go here and set is dark to 0 here and is dark to 1 here.

[00:01:43]
So we can see what we're doing. So how could we use the is dark variable so that we combine these two rules into one. If we have a calc function here to perform from a calculation. We want to get 100% when is dark is zero and we want to get zero when is dark is one.

[00:02:07]
So how are we gonna do that? So the general formula is, we have our variable and we multiply it by the value we want when it's 1. The value we want when it's one is 100%. And then we add 1 minus that variable. Multiplied by the value we want when it's 0.

[00:02:36]
So now when is dark is 0, what do we get? We get 0% here, because this entire term disappears. And this is 1 minus 0 multiplied by 0, so it needs to be the other way around. Actually, I think, We need to 0 here and a 100% here, yes.

[00:03:01]
And now it's fine. However, this is a little bit difficult to remember as you've just seen. So what we can do is defined and is not dark. Property, Which is always the opposite when is dark is zero it gives us one and when is dark is one it gives us zero.

[00:03:29]
This is essentially Boolean logic and coded into CSS. So here instead of having to remember when to use one minus and when to use just the property itself. We just go here and use is dark and is not dark. So basically we use is dark multiplied by the value we want if is dark is 1 and then is not dark multiplied by the value we want if it's dark is 0 and we use 0 and 1 to toggle between them.

[00:03:55]
And similarly, we can do the same thing here. So here we want the content to be black in regular blog posts the color to be black in a regular blog post and the color to be white in a dark mode blog post. So we could basically do the same thing here, and just flip these two.

[00:04:25]
Now, we can remove that. And similarly, We can go here, so we want 0.8 in regular mode and 0.2 in dark mode. So, Let's go here, we want 0.2 in dark mode, 0.8 in regular mode. And we can remove this as well. And now, what does this give us?

[00:05:02]
Right now, we have exactly the same result pretty much with more complicated code. But what we have achieved is, we can toggle this is dark property however we want in our CSS. We could go here and say prefers color scheme dark and make all of them dark on dark mode.

[00:05:27]
Or we could go here and say if we have a class in the HTML that is dark, then we make everything dark. And we could also have the dark class that we already had. It gives us a lot more flexibility. So to sum up, you can use 0/1 toggles for any numeric value.

[00:05:58]
And the basic formula looks like this. If you're interested in this, there is a lot more. You can go a lot deeper with this. There is a tire on a tutor has come up with entire formulas for like all logic operations. You can find a lot of pointers in the notes here.

[00:06:15]
There's a lot of literature on this stuff.