Custom Look and Feel

00:00 Now I’m going to show you how to completely customize Sublime Text visually for you so that you can really make it your own and get the setup that is exactly perfect for you.

00:09 I’m going to walk you through installing a custom font and configuring that. We’re going to make some tweaks to the Sublime Text font rendering, and then I’m also going to show you how you can actually completely change the editor look and feel and install a custom color scheme and a custom color theme.

00:27 Because the default… I mean, the default is nice, but there’s some really, really great options out there that I want to walk you through. All right! So let’s jump right in and start by installing a custom editor font.

00:39 So, you might be wondering, “Why do I even want to do that?” because Sublime Text has a pretty decent default font on all platforms it runs on. But depending on, you know, the monitor and the setup that you use, switching to a different font gives you a way to completely customize and tailor your setup to your own needs, right?

00:56 So for example, ha, to be honest, I noticed that my eyes just got a little bit worse over the years from staring at a computer screen all day. And so I found that changing the font size and picking a different font actually worked really well and just alleviated some of that so that I, again, can get more joy out of programming.

01:21 And also, some of them just look really pretty, right? And so I want to walk you through how you can install a custom font and then set that as the editor font in Sublime Text.

01:31 The first step we need to take is to download some font we want to install. I’m basically going to walk you through how you can download a new font from the internet and then install that in your Sublime Text.

01:42 It will be the same for any kind of font you can download and then install, so it gives you a lot of flexibility. Once you’ve gotten these basic steps down, it’s going to make it really easy for you to swap the font, the actual font, out for something else, right? Okay, so the first font I want to show you is called Luxi Mono.

02:00 We’re just going to Google for that. And then you just want to pick that fontsquirrel.com link. Luxi Mono is a monospace font, obviously, so it’s great for writing code. And it has a bit of a typewriter feel to it that personally I really enjoy. And you know, you can just give that a try. If you don’t like it, you can just switch to something else, but it’s a good example to kind of see how to install a font.

02:27 So, we want to download that TTF file, that TrueType file. I’m just triggering that download, and then it already did download.

02:37 So now… All right, so when I click on that, it’s going to open up that ZIP file. And we’re just going to extract that to the downloads folder here. Okay, and so this is going to open up a folder with all of these TrueType .ttf files. All right, so I can just go ahead and double-click those, and then install each one of them.

03:03 You want to make sure you install all of them, because otherwise you can run into a problem, for example, that it’s only going to show that font in italics. So you want to make sure all of them have been installed.

03:16 Now I’m going to go back to Sublime Text, and here’s a critical thing. It’s generally a good idea to quit Sublime Text and restart it after you’ve installed that new font, so that the new font becomes available to the application.

03:34 Okay, so now we’ve restarted Sublime Text, and now I’m going to go to Sublime Text Preferences > Settings. It’s going to open up in a new window and here on the left, I can see the default settings, and then on the right, this is my user settings.

03:48 I’m going to add a new property here, and that one is called "font_face". I’m just going to set that to the name of the font. And with this stuff here,

04:00 I’ll usually just add a new setting at the end of that file because it’s going to get reshuffled anyway once I save it. And then you want to add that comma (,) at the previous last line because this whole thing needs to be valid JSON so you want to make sure that’s terminated correctly. And now I’m going to hit Control + S to save that, and it should instantly—the display should update and display with the new font.

04:23 I’m going to switch back to some code here, and already now you can see we’re using the new font and you can kind of get a feel for what it looks like. So, you know, you may not like this font.

04:38 I think it takes a little bit

04:42 just getting used to it because it is slightly different, but actually I really like it. And for this font, for me on my system, there seems to be a kind of a sweet spot in terms of the size. So, by the way, you can switch the font size by pressing down Control and then hitting the - (minus) and + (plus) keys, which is super useful when you’re editing a bunch of code and sometimes you just want to get a little bit more visibility and zoom in or zoom out.

05:09 I’m going to keep this at a higher font size than I usually would so it’s easier for you to read, but… yeah, so I really enjoy this font. Actually, there’s one other great font that comes with Ubuntu, if you’re using Ubuntu, and that one’s called Ubuntu Mono,

05:27 which also has a really nice feel to it. So I’m going to save that settings file again and immediately it’s going to reload with Ubuntu Mono. It’s a bit of a sleeker font, maybe a little bit more chunky than other monospace fonts but, you know, I really, really enjoy this font. So, yeah!

05:45 This is basically how we install a new font, once you’ve downloaded it, installed it in your system, and then set it in your editor. Now, there are a few more tweaks we can make to the font rendering.

05:58 I’m going to switch that back to Luxi Mono for a second here. And I just want to show you how this option works. So again, I’m going to add a new option here, and this one is called "font_options", and this one is a list.

06:12 Here I can specify different options for Sublime Text font rendering. For example,

06:19 I can set the "subpixel_antialias" setting and then hit save. This should be the default now. It doesn’t hurt to set that again, but you can play with some other settings here. For example, you can put "no_antialias" and depending on the font, this will look either really ugly or really good.

06:37 And then there’s another option called "gray_antialias", which has a bit of a smoother feel. Let’s just leave that at the default. But this is completely dependent on the setup and the font you’re using, right?

06:49 So I would encourage you to play with the settings, especially with the anti-alias settings. And for example, the "no_antialias" can look really good if you’re using a font at a relatively small size. It can actually look better than the anti-aliased font.

07:05 There are two more changes that I like to make here, and that is disabling bold fonts and disabling italic fonts.

07:16 You can just put "no_bold" and "no_italic" and then save that, and what that did is it got rid of this. Some of these keywords were getting rendered in bold or in italic font, and I find that pretty distracting because we’ve already got the color highlighting. So personally, I always turn off the bold and italic options here, but of course you can play with that.

07:36 It’s just a little tweak that I like to apply in my setup because I think it makes for a nicer reading experience. Okay, so now I want to show you how to improve the editor look and feel and to make a couple of extra tweaks to your Sublime Text setup.

07:53 And then after that, we’re going to dive into installing a custom color scheme. This is really a combination or kind of a collection of tips you can just mix and match as you please, right?

08:03 So I’m going to demonstrate what I’ve found the most valuable personally, but of course, you’re free to go ahead and kind of find your own settings. Like, this is really the whole point, you know?

08:12 To find the settings that you personally enjoy and that work really well for you, because ultimately, this is what it’s all about, right? Really building this environment that is perfect for you and that does exactly what you want and looks exactly the way you want it to look like. Okay, so you can see here, for example, that my cursor is blinking. And I’m not a huge fan of that, so we’re going to jump into the Sublime Text settings here and I’m going to show you some tweaks that I make to my caret settings here.

08:46 The first thing I’m going to change is to disable the blinking.

08:51 I’m going to set the "caret_style". Is it “ka-rè”? I don’t know. I’m just going to call it the “carrot”, right? It’s clearly looks like a carrot. Um, okay. So this disables blinking. I hope you can see that in the video, this disabled blinking.

09:06 And then I also like to turn on the "wide_caret" setting.

09:12 All right, there we go. Ha, the “wide carrot” setting. And this is just going to make that caret a little bit more visible.

09:24 And then there’s one extra option that I like, and that is called "highlight_line". And again, we’re going to set that to true.

09:32 What this does is the line the caret is placed on gets this kind of typewriter-style highlighting, and I find that really helps with just quickly seeing what you’re editing and where you’re at without getting this kind of distracting blinking.

09:53 And I find that this really helps with navigating around inside my code.

10:00 The next thing I want to show you, another tweak I want to show you, is how you can change the visibility of whitespace in indentation levels. In Python, the indentation level of your statements has a meaning, right?

10:14 So it’s super important to have good visibility into your settings for whitespace in your code. So again, I’m going to show you a couple of settings that help with that.

10:23 The first one is called "draw_white_space"

10:27 and I’m going to set that to "all". And what that does is it draws… Let’s switch to some code here. It gives you highlighting, or like it shows all of these usually invisible symbols, right? It shows me that here are a bunch of spaces, and then if I have extra spaces at the end of a line, this would also show up.

10:46 And it also shows me that, you know, here we have a bunch of tab characters. And I find that really helpful.

10:54 Now, here’s another helpful setting. You can see these little dotted lines. They might be a little bit hard to see in the video, but basically there are these, like, vertical lines here.

11:02 These are the indent guides. Now, these are not super visible by default. The change we want to make is we’re going to set the "indent_guide_options" setting. And again, this is a list. We’re going to set that to ["draw_active"].

11:23 What this changes is that it only draws these indent guides for the line that you’re on, right? So by default, you’re not going to clutter everything up with these indent guides, but then let’s say when I go into a piece of the code here that’s a little bit indented, I can immediately tell that, okay, this line is indented below the if statement. That’s part of a def, like, a function definition. And then that’s part of the whole file… or part of that class here, actually, excuse me.

11:56 So this is super helpful because imagine you’re working on a slightly longer function, or maybe you’re working inside a class—let’s say, let’s pick this one here.

12:07 This is going to immediately tell you the indentation level, and also it’s going to tell you that line here actually sits like two levels below the top level.

12:16 So immediately, even if you don’t see that def here, this is going to give you a hint that this is part of a method here, and then above that we have another structure like a class.

12:27 And I find that to be really nice and helpful because I don’t need the indent guides to clutter up everything. You know, when I’m working on a specific piece of the code, I don’t need to see all of the indent guides constantly. Okay!

12:43 Another setting you can play with is the line padding settings.

12:50 I’m just going to put some examples here. I don’t actually use these, or I set them to the defaults, but let’s add some padding here. And then what this does… Maybe we need a little bit more of an extreme example.

13:06 What this does, it spaces the lines apart further vertically, and this could be helpful to increase readability, right? So you could say, “Okay, I want a 2 pixel…” Like, they don’t have to be symmetric, right? So you could change that to your liking.

13:25 And it’s pretty interesting, I think, to play with that setting, but personally I don’t use it so I leave it at the default, which is 0 so I can fit a little bit more code on my screen. But again, it could be a really interesting… Depending on the font you use, it could be a really interesting setting to play with. Now, one thing I don’t use personally, is the code folding functionality here.

13:49 I’d rather see my code all the time and I want my scroll distances to stay the same, so I don’t use the code folding and I don’t want to accidentally click on it.

14:01 So you can also disable that by going to "fold_buttons" or adding a setting called "fold_buttons" and then saving that. And that, again, gives you a little bit more space here horizontally because it gets rid of this little symbol here for the code folding. Okay, so there’s one more really cool feature in Sublime Text, and you might’ve gotten used to this already.

14:26 So actually, when you scroll to the bottom of a file, do you notice how you can scroll up the last line actually all the way? Like, it doesn’t have to sit down there at the bottom?

14:38 And this setting is called the "scroll_past_end" setting—very aptly named—and I find that super helpful because otherwise you would be working, if you’re adding more code towards the end of a file, you’d be always working on the last line here. And so I find that very helpful to have the ability to scroll up and kind of place that in a position where it’s convenient. And so this should be turned on by default, but you can make sure this is enabled—because on other platforms it might not be—by setting the "scroll_past_end" setting to true.

15:16 And then maybe to show you what it would look like if we would disable that,

15:22 then I couldn’t scroll up further. And you might prefer that, so there’s some extra choice for you. And now I undid that and we’re back to normal. All right, there’s one more setting that is kind of helpful and that is the "shift_tab_unindent" setting.

15:40 This isn’t really a visual tweak, but it kind of fits in line with what we’re doing right now. What this allows you to do is when you’re on an indented line, you can hit Shift + Tab, and this will undo the tabbing, or kind of reverse the tabbing and move the code to the left. And I find that, I don’t know, at some point I must have used an editor that did that and then I was always missing this setting, and so now I finally found a way to restore it in Sublime Text, which made me really happy.

16:07 Okay, so these were some visual tweaks here for the caret and just kind of how the scrolling and stuff behaves, and now we’re actually going to jump in and customize the way the rest of your Sublime Text window looks like, right?

16:22 We’re going to customize the color scheme and the color theme. You might be wondering what actually is the distinction between those, because to be honest this is a little bit confusing in Sublime Text terminology.

16:33 So in Sublime Text, a color scheme determines the look and feel of the syntax highlighting in the code editor area, all right? So the color scheme is going to determine the highlight colors here and just the way this code is formatted.

16:51 And the color theme is responsible for all this other stuff around here, for example, the way the search dialog looks and the way the sidebar here looks, or yeah, the file browser here looks.

17:04 So, you have full flexibility styling these areas individually, but of course it’s important to pick a color scheme and color theme combination that kind of makes sense.

17:16 So I’m going to walk you through an option that I personally really like, because I feel like it looks nice and it’s still very readable, but you might have a different, you know, just a different preference and pick something else. Actually, before we dive into that, I want to show you here some of the default color schemes that actually come with Sublime Text.

17:38 Maybe this is all you need for now, right? Because when you go to Preferences > Color Scheme, you can switch around between some of the built-in profiles. For example, the Blackboard setting is a nice dark theme. Or you could use another one that I like, which is the Zenburnesque one. You might really enjoy that. Personally, I use a custom theme—or a custom color scheme for that as well, but this is a good way to kind of try out some of the options that are available. All right!

18:10 Now the first thing we’re going to do is install a color scheme for the syntax highlighting. So again, this is going to work through the Install Package command in the Command Palette.

18:22 We’re just waiting for not to fire up. And then I’m going to search for tomorrow color schemes,

18:28 hit Return to install that. This is just going to take a second to install.

18:33 And now when you go to Preferences > Color Scheme, you have a new option here, the Tomorrow Color Schemes. Personally, I really like the Tomorrow Night color scheme because I feel like it is very, sort of, you know, subdued colors and it’s a dark scheme and it just helps readability.

18:56 Okay, so now we’ve enabled this color scheme. Now the next thing I want to show you is how you can actually get rid of that bright sidebar area by installing a color theme. Okay, so now, as you’re seeing this, sometimes when you install a new theme, you get these visual glitches, so you always want to restart a Sublime Text, basically, when you change the theme and also potentially the scheme if you’ve just installed it.

19:21 But I’m going to carry on and install the theme first and then restart Sublime. Okay, so again, we need to go to the install package command, and then we’re going to search for theme SoDaReloaded.

19:36 I think SoDa stands for Solarized Dark or something. So it’s kind of, you know, people come up with these themes and then other people kind of fork them or create copies of them, and so they kind of evolve into different look and feels, and it’s kind of crazy what options are available there. But let’s go with that one, because this is kind of my go-to theme so I want to make sure you can see what that looks like. Now this is popping up this install message, and here we can just copy that line directly, this "theme": "SoDaReloaded Dark.sublime-theme" setting.

20:15 And again, now we need to go to our settings here and just plop that in.

20:23 And of course, you could either copy and paste that or you just type it in manually. You just want to make sure it’s "theme": "SoDaReloaded Dark.sublime-theme".

20:33 And we already set the color scheme, and now I’m just going to save that. And this is going to redraw my window here. And now this looks pretty good, actually, but I’m what I’m going to do here is still make sure I quit my Sublime Text and then restart it. And actually,

20:57 I want some code example back as well. So, you can hide that sidebar by pressing down Control and then tapping on K and then on B, and then when you do K + B again, it goes away, so that’s a bit of a shortcut that that can be really helpful sometimes. Okay, so what you can see now is that we have this completely different look and feel compared to the default version of Sublime Text, right?

21:27 So you can see here, the sidebar is nice and dark and we also have this color highlighting here for the different file types, which is something that I really like. And then also the dialogs, like the search area, they look different. So,

21:44 yeah! This is the look and feel that I’m using for my Sublime Text, and I really enjoy this theme. Of course, there are actually thousands of options available in terms of the theme you could install, but they would all be installed in pretty much the same way that I showed you. So, you know, you can always go and try this combination out and then see if you like it, also experiment with other fonts and stuff, and then once you know how that works, you can just always go and search for other themes and then install them.