Instead of writing a lengthy blog post for this, I’ve created an in-depth video that outlines the process! Yay you!
Video Transcript
Alright, so unlike most videos I’m going to jump right into showing you how to create your own custom Chrome theme. If you’re in the extensions area, which you go to the little options here, more tools > extensions, you’ll end up on this screen here.
The first thing you’re going to want to do is flip on “developer mode”. This is going to allow you to have some features that we’re going to need in a little bit, once we pack everything up for our extension. So one of the first things I’m going to do is open up the Chrome Web Store. Because what I want to do is I want to find a theme that I can just quickly open and install that will allow me to find the necessary files to create my own custom theme.
I don’t particularly like this theme but whatever, here it is. I can click “Add to Chrome” but first what I’m going to do is show you where you’re going to go to find the necessary files. In my case, it’s C: > Users > [Your Name] > AppData > Local > Google > Chrome > User Data > Default > Extensions. This is where you’re going to find all of your extensions, some of which are themes, some of which are addons or apps.
What you’re going to do is install a theme. So let’s say this one here — “Add to Chrome”. Then you can see that it has installed this theme. Now, what you’ll notice here, if you sort by Date Modified, is the theme is going to be at the top. That’s what you’re going to do to easily find a theme file. It’s helpful to find a theme that is very close to one that you want to create but, of course, you can just create one essentially from scratch as well.
So I’m going to click into here and I’ll get a version folder and then you’ll have a few different files here. The main ones you need are “images” and “manifest.json”. “Manifest.json” contains all of the parameters [should be attributes] and colour codes and all of that kind of information for the theme and the images, of course, contain a couple of the images for the background of the theme and so on.
I would normally copy these into my own folder but I’ve already done that so I’m just going to open that folder here. So this “Custom Chrome Theme”. Now there are two files here that won’t be there initially, so I’m just going to delete them for now. If I go into the “images” folder here you’ll see that I took this originally from a “Wolf” theme so I’ve just packed the old images in this folder here but really these are the ones that I mostly care about — “tab background” and “toolbar background”. However, there are also the “theme frame” and the “background” here. So these two will provide an overall background, like an overall image background, if that’s what you’re looking for. In my case, I went with an all-colour background so I skipped those images and just did the tab background and toolbar theme here.
Once you’re in here you can switch these out, you can change the colours for the different toolbars. You can also use these “frame” and “background” images to provide an images for the background as well. The main thing you want to do is come back to the top-level folder and open up this “manifest.json”.
So the “manifest.json” will look like this. What you’ll see here is a number of pieces of information — the description, the key, a few things not to worry too much about — you can name it here by providing your name. This is where you get to the main parameters.
First of all, you have the colours — bookmark text, button background, frame — some of these I’m going to link to an article that actually takes you through these. So if I open this up here, there’s a couple of articles. There’s this “theme tutorial” — this one is a little old but it’s really good because it shows you each of the different positions of the colour elements and then it gives you a table with a description and the notation, which you can add into the JSON file.
Separately, Google Chrome has their own official theme documentation and it’s a little bit harder to use but it gives you some examples here and then below there’s a “colour”, “image”, “properties”, and “tints” section. If you click on, say, the colour table, what you’ll see is all of the different options available to you here. So “frame”, “frame inactive”, “frame incognito” etc. All of these are the different parameters that you can set to set your colours.
Again, you’re going to want to use this theme tutorial to help you understand what those colours are. So I’m not going to spend too much time on that, I’ll let you guys fiddle around with it but I’m just going to show you how to actually do it and then you can start customizing it yourself.
So in here, you set some of your colours that are in “rgb” format. So red, green, blue. You can see a lot of mine are the same. I’ve chosen dark grays, slates and stuff like that. My overall colour theme is this essentially white. Down in the images section — theme tab background and theme toolbar — these are the images I was showing you before, which are in this folder here. These are going to set some of the major colours across the interface. Properties, I’m not too worried about here, but if you have a background image that you want to repeat you can deal with some of the settings there. And then tints, which changes the colours of the different buttons like the back button, the refresh button and so on. You can set that to a black, you can set that to, in my case, a dark gray.
So once you’ve got the “manifest.json” file with all of the information that you want, the correct parameters, again, you’re going to want to play with this over and over — it’s pretty easy to repack. Then what you’re going to end up with is a folder like this. This is my custom chrome theme. I’ve got my “images” folder, it’s got my “manifest.json” with my new parameters that I’ve set. Then the process of bring it up is pretty simple.
Go to your extensions again. If you’ve enabled “Developer Mode” you’re going to click “Pack extension”. It’s going to ask you for a root directory and you’re going to browse to that root directory, in my case, “Custom Chrome Theme”. I’m going to hit “Ok” > “Pack extension”.
You get a little confirmation here that it created two files, you’re “crx” file and your “pem” file. What you want to do is double-click the “crx” file and it is going to ask if you want to open it — hit continue, and add it with “Add Theme”.
So this is the custom theme I created. It was based off of a “wolf” theme initially. Also, I used a really cool “Blue/Green” one that I really liked. So I’ve got this as this kind of white here. The toolbar and the search bar are the exact same colour and you can only see the toolbar when I hover over it. You get that little bit of a gray with a dark gray in the background.
So let’s say I did that and I don’t really like the look of it, I need to make some changes, that’s fine. All you’re going to do is delete the “.pem” file — so if I delete that it’s going to let me repack it. So I can come in here, make whatever changes to the JSON file that I want, save it out, pack extension again, browser to the folder, “Ok”, “pack extension”, “Ok” and then double-click the “crx” file again and you’ll see that it will add it.
It’s very easy to do and very quick to do. Again, the documentation will show you, if you want to add those images back in, the ones that I chose to take out, you’re just going to add them to this image section here. I only have these two in this main image folder, but you would have two like this in your main image folder as well named “theme_frame” and “theme_ntp_background” and you would throw them in here and just like to them by creating parameters for them in the JSON file. That documentation is available and I will post a link in the description.
That’s pretty much it. So hopefully you guys found that useful and relatively straight to the point. I tried looking for quite a while to find something that was simplistic but also gave me the information I needed and I couldn’t find it so hopefully this is going to do that for you guys.
