Friday, 17 August 2018

How I Created My Own Chrome Browser Dark Theme



--- VIDEO TRANSCRIPT ---

First thing. Create a folder for your theme. That folder will contain an images folder and a manifest.json file. Next. Visit the themes documentation website and copy the example code into the manifest.json file. Modify the json file to your liking. Add additional properties if you want to. The documentation describes where to look for them in the theme_service.cc file, also linked to in the documentation.

Point images properties to images you create in the images folder. I used all black images (800 x 600 png). I used white text and black background colours. I learnt that -1 in Hue means leave unchanged. Also NTP stands for new tab page. I set my new tab page background to repeat.

Next. Load the theme folder as an extension in Chrome. Developer mode must be enabled. The example code does not include manifest version so I had to add this and set to 2. Save and then go back to chrome and click retry. Let's look at the new tab page now. Wow. Fancy and simple. To remove the theme you have to go to settings and click reset to default under theme.

I have my theme published to my github and will make changes to it in the future. Additionally you can publish to the chrome web store. That process will not be covered in this video. If you want a non-coding way to create a theme, check out themebeta.com. Notice the warning you get at the bottom.

No comments: