Create and Publish a Custom Browser Theme

Learn to Create and Publish
Your own Browser Theme

example Screenshot how to create a browser theme — *This is how the Final theme will look*

Introduction

The process to create a browser theme is very simple and can be done by anyone. And the best thing is creating a browser theme does not require any coding skills. You can create your own browser them by using the theme builders or by writing a few lines of English. Moreover, you can create and use these themes in any chromium based browsers( i.e. Google Chrome, Edge, FireFox, etc. ).
Anyways, I have explained both the processes to create a browser theme and also an additional method.

What is a Theme?

A browser theme is a file which defines how different parts of your browser looks and feels (i.e. color and background-image). This file is saved in a format know as .crx which browsers understand and use.
In other words, A theme is a special kind of extension that changes the way the browser looks. Themes do not contain any HTML, CSS or JavaScript file but contains only a JSON manifest file ( and images, if used ).

How To Create a Browser Theme?

You can create a browser them in two methods,

Using an existing Theme builder, such as ThemeBeta
Or by creating the theme JSON ( manifest.json ) file yourself.

In this post I have explained how to use both the methods to create your own browser them. Check the steps below

Tutorial: Create a Browser Theme

Method 1: Use Theme Builder

There are many chrome theme builders available in the market, however I like ThemeBeta because it is very easy to use has interactive explanation. Use this link to access ThemeBeta theme builder.

Steps to create a theme using ThemeBeta

Open the link and click 4 buttons ( as simple as that ). For better understanding follow the image below.

Cons:

You have limited control over the theme appearance. If you want to design the theme at a more granular level then use the second method.

Related Topic

Power Automate SharePoint Alert for Beginners

Mcrosoft OneDrive Beginners Guide

Method 2: Create a Manifest.json File

A manifest.json file contains all the information related to the theme. You can set different images and colors by setting different parameters. Moreover, the manifest.json file can be packaged and uploaded to google chrome webstore if you wish to publish it to the world.

A manifest.json file looks as below,

{
“version“: “2.6”,
“name“: “camo theme”,
“theme“: {
    “images” : {
      “theme_frame” : “images/theme_frame_camo.png”,
      “theme_frame_overlay” : “images/theme_frame_stripe.png”,
      “theme_toolbar” : “images/theme_toolbar_camo.png”,
      “theme_ntp_background” : “images/theme_ntp_background_norepeat.png”,
      “theme_ntp_attribution” : “images/attribution.png”
    },
    “colors” : {
      “frame” : [71, 105, 91],
      “toolbar” : [207, 221, 192],
      “ntp_text” : [20, 40, 0],
      “ntp_link” : [36, 70, 0],
      “ntp_section” : [207, 221, 192],
      “button_background” : [255, 255, 255]
    },
    “tints” : {
      “buttons” : [0.33, 0.5, 0.47]
    },
    “properties” : {
      “ntp_background_alignment” : “bottom”
    }
}

As you can see, it has some definition for colors and images, however it is just a sample and has only few attributes, there are many more properties/attributes available. If you want to know more about these attributes, check this Google document.

However, for my use case, I have removed all the images except the background image. And also I have used different color codes to make it look better. Download the code files which I have used using the below link.

Files to create a Super Bike browser Theme Download

How to Apply the Theme?

To apply the theme

Extract the downloaded file
Open the extensions page of your browser, then enable developer mode.
Click on Load Unpacked and choose the entire extracted folder.
Wait for few seconds and the new theme should be applied

open extensions to apply a new browser theme

Finished, that’s all the steps required to create and apply your own browser theme. However this tutorial is fairly simple and you can customize it and design it more beautifully. To learn how to create better browser themes check the official google documentation using this link.

Publish your Theme

Also if you would like to publish this theme to the world then you need to create a google chrome developer account which has a one time charge ($5), post that you can publish as many themes as you want. To learn more, check this document.

Thank you for reading and I hope this document has helped you to understand what a browser theme is and how to create one. If would like, please help us by buying something using the below amazon links.

Please Help us Grow!

I hope you have found this article helpful. If you are happy with the document, please use the below links when you buy something from Amazon to help us grow.

Ways to Help

Amazon Affiliate Links

How this works?

Amazon affiliate program gives a small (%)share of price to the referrers, so feel free to buy anything.
Below are some Amazon affiliate links, if you open amazon application/website using these links and buy something, (it can be one of the below items or anything of your choice) Then Amazon will give us a little percentage(%) of the money you spend on Amazon. To know more check this document.