2.4 Set the Colours

The next step is to set up our colors. So let's go through each slide and make sure that the colors there match the ones in our sketch documents. We're gonna start by overriding these color variables from here with some of our own colors. So I'm gonna create a new variable called black and that's gonna be 282b48. These are just colors that I got from the sketch document. And then we have some variations. So block 65 is gonna be rgba black with a 65% opacity. And we're also going to do a 50 version and a 15 version. And then let's do a white variable, you never know when we're gonna need this. And let's also do white-50, that's rgba white with a 0.5 opacity. And let's also do a 10, so white-10 is white with 10% opacity. And then we have our secondary color which is that turquoise, so 3C989B. Again, these are taken directly from the sketch file. Tertiary is ffac00. Let's not forget the hash sign there. And let's also do the accent color which is fc4349. And let's also do the light color which is f1f2ec. So now let's start background of the presentation. This is going to be white. The mainColor, which is the color of the text, we're gonna set it to black but not black like black, black. It's the black variable here which is kind of a dark blue. And then the headingColor is also going to be black, okay? This codeFont actually belongs in typography here, so let's push it up. What else? Links and actions. The linkColor is going to be secondary, linkColorHover, sure we can leave it at that. Text selection, let's also use secondary here and selection color is going to be white. All right, so let's see what we have. Okay, so it seems like we're still using that old theme. I wonder why that is the case. We might actually have an error in here somewhere and, yeah there it is. That was supposed to be a hash sign. So now, right, we're starting to see the new colors. This is the secondary that's being applied to the links here, and also to the progress bar. The new black is applied to the text, all right, so we're starting to get somewhere now. So all the color information is now nicely added to our project. Of course, we'll be using colors more as we're writing the code, the custom CSS, but the basics are these right here. Now, the next thing to do is to set a custom scaling because by default, all Reveal JS slides have a set within a set height. But we wanna go past that and also change the presentation mode or the display mode from block to flex. We'll be using Flexbox on most of these to display the content. So that and more are coming up in the next lesson, see you there.