Touring the default CSS themes

reveal.js ships with a number of really good themes, so let's take a minute to explore them and find out how to change 'em. So if you look at the HTML file, it's calling the theme called default.css. Obviously, that's the default theme. And what you want to do is just change this name to the different themes. So, the first one that you can change it to is called beige. And if we save this and come back here and Refresh, you could see that the page has a beige color. Let me go through some of the other slides so you could see some of the other looks. It's not bad. You can also use one called moon, I really like this one. It's sort of yellow text on a dark blue background. Then there's a similar one called night and that one does change the font though but it's sort of dark and it has this orange yellow color right there, that's pretty nice. There's another one called serif which does pretty much what you think it would do. It changes the font to a serif font. A little bit plain, a slight off-color in the background. And if you're really into simple, there's one called simple. And it's really plain text on a white background. It's a little too minimal for me. And you can also use one called sky which I really like because it has sort of a blue gradient. It's not a bad theme except that that particular font that's been used on the headline can get really big especially on an H1 tag like this, which doesn't look good. And finally, there's a theme called solarized, which uses some pretty plain colors. Sort of a yellow on a off-blue kind of background. I think it looks, I actually like this one a lot, because it's minimal and it's very soothing to the eyes. Now, you can also load a theme into the presentation by passing along a URL. That's actually a quicker way of previewing some of the themes. So you can put in here something like ?theme= and then the name of the theme. So we'll do the moon theme here. And it switches it to the moon theme. So, sort of a quick way of getting to a different theme. So we'll go back to beige here. And if we take that off, it just, it goes back to whatever the current default is. Now that means that you can create a link in your presentation that dynamically changes the CSS by loading another style sheet. Now, that's actually pretty cool. That means that while you're in a slide, if you click on something, you can make a new style sheet load dynamically. And that may allow you to do some cool special effects. So, it's pretty easy to do. We need to do a couple of things though. So, I'm going to go to this section right here with the San Francisco slide. And I'm going to add something right after this paragraph and what I want to add is a new paragraph with an anchor tag inside it. And this is going to link to theme equals whatever the name of the theme I want. So I'm going to switch it to the moon theme. And then I want to put in a pound sign and then I want to put in a target, so what I could say here is photos. And I'll need to give my section here an ID of photos so I can go directly to that slide. Otherwise, it's going to take me to the first slide. So I'm going to save this. Come back here. Refresh. And I need to put some text, actually, right in my links. So I didn't actually put in the text here. So I'll type in moon there. Save that, come over here, Refresh. And now I can click on this and it takes me to the moon template. So there's actually a lot of really cool themes that you can use with reveal.js. One suggestion I have for you is that you stay away from the default theme. A lot of people that give presentations with reveal.js don't bother to change the theme, so the default has really been overused.