Custom Chrome Theme Tutorial – YouTube

persona 5 google chrome theme This is a topic that many people are looking for. star-trek-voyager.net is a channel providing useful information about learning, life, digital marketing and online courses …. it will help you have an overview and solid multi-faceted knowledge . Today, star-trek-voyager.net would like to introduce to you Custom Chrome Theme Tutorial – YouTube. Following along are instructions in the video below:

“So unlike most videos. I m going to njump right into showing you how to to create your own custom chrome theme. If you re in nthe extensions. Area.

Which go to the little options here more tools extensions. You ll nend up on this screen. Here. The first thing you re going to want to do nis flip on developer mode .

This is going to allow you to have some features that we re ngoing to need in a little bit once we pack everything up for our extension. So one of nthe first things i m going to do is open up the chrome web store. Because what i want nto do is i want to find a theme that i can just quickly open and install that will allow nme to find the necessary files to create my own custom theme. I don t particularly like this theme.

But whatever nhere. It is i can click add to chrome. But first what i m going to do is show you where nyou re going to go to find the necessary files in my case it s c users your name n appdata local google chrome user data default extensions. This is where nyou re going to find all of your extensions.

Some of which are themes some of which are naddons or apps. What you re going to do is install a theme nso let. s say this one here add to chrome . Then you can see that it has installed this ntheme now what you ll notice here.

If you sort by date. Modified. Is the theme is going nto be at the top that s what you re going to do to easily find a theme file. It s helpful nto find a theme that is very close to one that you want to create.

But of course you ncan just create one essentially from scratch as well so i m going to click into here and i ll get na version folder and then you ll have a few different. Files here the main ones you need nare images and manifestjson ..


Manifestjson contains all of the parameters should be nattributes and colour codes and all of that kind of information for the theme and the nimages of course. Contain a couple of the images for the background of the theme and nso on i would normally copy these into my own folder nbut. I ve already done that so i m just going to open that folder here so. This custom nchrome theme .

Now there are two files here that won t be there initially. So i m just ngoing to delete them for now if i go into the images folder. Here you ll see that i ntook. This originally from a wolf theme.

So i ve just packed the old images in this folder nhere. But really these are the ones that i mostly care about tab background and n toolbar. Background . However there are also the theme frame and the background here nso these two will provide an overall background like an overall image background.

If that s nwhat you re looking for in my case. I went with an all colour background. So i skipped nthose images and just did the tab background and toolbar theme. Here once you re in here.

You can switch. These out nyou can change the colours for the different toolbars. You can also use these frame. And n background images to provide images for the background as well the main thing you nwant to do is come back to the top level folder and open up this manifestjson.

so the manifestjson will look like this nwhat. You ll see here is a number of pieces of information. The description. The key na.

Few things not to worry too much about you can name it here by providing your name this nis. Where you get to the main parameters first of all you have the colours bookmark ntext button background frame..


Some of these i m going to link to an article that nactually takes you through these. So if i open this up. Here. There s a couple of articles nthere s this theme tutorial.

This one is a little old. But it s really good because nit shows you each of the different positions of the colour elements and then it gives you na table with a description and the notation which you can add into the json file separately google chrome has their own official ntheme documentation. And it s a little bit harder to use. But.

It gives you some examples nhere and then below there s a. Colour image properties and tints section. If you nclick on say. The colour table.

What you ll see is all of the different options available nto. You. Here. So frame frame inactive.

frame incognito etc. All of these are the ndifferent parameters that you can set to set your colours. Again you re going to want to use this theme ntutorial to help you understand what those colours are so i m not going to spend too nmuch time on that i ll let you guys fiddle around with it but i m just going to show nyou how to actually do it and then you can start customizing it yourself so in here you set some of your colours that nare in rgb format. So red green blue you can see a lot of mine are the same.

I ve nchosen dark grays slates and stuff like that my overall colour theme is this essentially nwhite down in the images section theme tab background and theme toolbar these nare the images. I was showing you before which are in this folder. Here these are going to nset some of the major colours across the interface properties. I m not too worried about here nbut if you have a background image that you want to repeat you can deal with some of the nsettings there and then tints.

Which changes the colours of the different buttons like nthe back button. The refresh button..


And so on you can set that to a black you can set nthat to in my case a dark. Gray so once you ve got the. Manifestjson file nwith all of the information that you want the correct parameters. Again you re going nto want to play with this over and over it s pretty easy to repack.

Then what you re going nto end up with is a folder like this this is my custom chrome. Theme i ve got my images. Nfolder it s got my manifestjson with my new parameters that i ve set then the process nof bring it up is pretty simple go to your extensions again. If.

You ve enabled n developer. Mode you. re going to click pack extension . It s going to ask you for a root ndirectory and you re going to browse to that root directory in my case custom chrome ntheme i.

m going to hit ok pack extension you get a little confirmation. Here that it ncreated two files you re crx file and your pem file. What you want to do is double click nthe crx file. And it is going to ask if you want to open it hit continue and add it nwith add theme .

So this is the custom theme. I created it nwas based off of a wolf theme initially also i used a really cool blue green. One nthat. I really liked so i ve got this as this kind of white here.

The toolbar and the search nbar are the exact same colour and you can only see the toolbar when i hover over it nyou 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 nlike the look of it i need to make some changes that s fine all you re going to do is delete nthe pem file. So if i delete that it s going to allow me to repack it so i can come in nhere. Make whatever changes to the json file that i want save it out pack extension again.

Nbrowser. To the folder ok ..


Pack extension. . Ok. And then double click.

The crx file. Nagain. And you ll see that it will add it it s very easy to do and very quick to do nagain. The documentation will show you if you want to add those images back in the nones that i chose to take out you re just going to add them to this image section.

Here ni. Only have these two in this main image folder. But you would have two like this in your main. Nimage folder.

As well named theme frame and theme. Ntp. Background. And you would throw nthem in here and just like to them by creating parameters for them in the json file that ndocumentation is available and i will post a link in the description.

That s pretty much it so hopefully you guys nfound that useful and relatively straight to the point. I tried looking for quite a nwhile to find something that was simplistic. But also gave me the information. I needed nand.

I couldn t find it so hopefully. This is going to do that for you guys. ” ..

.

Thank you for watching all the articles on the topic Custom Chrome Theme Tutorial – YouTube. All shares of star-trek-voyager.net are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.
description:

Everything you need to know to create your own custom Chrome theme. I found way too many videos simply showing you how to CHANGE your Chrome theme but this is actually how to create a custom theme using an existing one as the base.

Below are links to the official documentation and an overview on the available parameters for customization:

– https://developer.chrome.com/extensions/themes
– https://sites.google.com/site/gsugsa/google-apps/google-chrome/how-to-create-a-theme

tags:
chrome, theme, chrome theme, custom chrome theme, how to, how to create custom chrome theme

Leave a Comment