#chrome themes

Step 1: Making your theme

Start off by creating a folder wherever you want to save your theme for later use and name it something that makes sense for you.

In this folder will be the contents of your theme. Your theme will be made up of the following:

A JSON files called "manifest.json"

An optional folder for any images, called "images"

The manifest JSON will contain all of the information on colors, images, properties, etc. that will make up your theme.

If you would like a more interactive way to start building this, including a color picker, use the following tool https://chrometheme.studio/, and download the resulting ZIP. Unzipping this will provide you a folder containing the JSON manifest with the settings you configured online.

The problem I immediately ran into was: I got into this situation because I changed my color theme and can't change it back. How do I know what colors to use? So here's

How I guesstimated what colors I previously had

I took a full screen screenshot of my current fucked up Chrome theme with the closest color set I could possibly get to my original color theme using their new shitty hue slider.

I then plopped that image into my favorite non-MSPaint image editor with the ability to adjust Contrast and Saturation, and adjusted those on the image until I was satisfied that it looked as close as possible to my original theme colors.

Here's a before and after on mine. Appreciate the difference.

I now have a way to colorpick and get all of the RGB/HEX codes for the colors I want my theme to be.

You'll also notice that the online theme editor doesn't have anything for the background image in the new tab page. So here's

How to add a background image on your new tab page

For starters, create a folder called "images" on the same level as the manifest JSON file inside the folder of the ZIP you downloaded from the online theme maker. Then add the JPG or PNG images you want to use for your theme inside the "images" folder that you made.

After that, you will need to do some additional fine tuning to the manifest JSON file. This is where some minor programming knowledge will help, but isn't required.

You might need a special program to open and edit the JSON. Try Notepad++ for convenience, or use this online editor https://jsoneditoronline.org/.

The specifications for what information can be included in this are here. This was surprisingly the hardest part of this process because it somehow took 20 years to find the up to date documentation. Like literally you cannot google Chrome Theme Manifest or anything of the like to get to this page. I had to dig.

You'll want to take note of the "images" and "properties" sections.

Let's start with the images section. Simply include the local path of the image you want to use, or more specifically, the name of the image file as it shows in the "images" folder, prepended with "images/", to the "theme_ntp_background" field of the manifest JSON.

Example:

"images": {             "theme_ntp_background": "images/ride_the_wave.png" },

Then, depending on if you want the image to repeat or not, and where to position the image on the page, you will need to use the properties section.

The field "ntp_background_alignment" can be a vertical position of "top", "bottom", or "center", with an optional horizontal position "left" or "right" appended with a dash, such as "bottom-right".

The field "ntp_background_repeat" can either be "repeat" or "no-repeat" depending on if you want your image to tile or not.

Example:

"properties": {             "ntp_background_alignment": "center",             "ntp_background_repeat": "no-repeat" }

If you don't tile your image, you may notice a problem, that your image does not fill the window entirely. There is unfortunately no option in the manifest to have the image exactly fill the window based on size, so you will need to manually size the image you include in the images folder to fit the full resolution of your Chrome window.

Here's what the manifest for my new theme looks like:

{     "manifest_version": 3,     "name": "Ride the Way Pre Chrome Refresh 2023",     "description": "This theme was modified from a generated theme from Chrome Theme Studio. Create your own custom Chrome Theme for free at chrometheme.studio.",     "version": "1.0",     "author": "TheBrows",     "theme": {         "colors": {             "frame": [9, 2, 35],             "frame_inactive": [8, 6, 15],             "frame_incognito": [8, 6, 15],             "frame_inactive_incognito": [8, 6, 15],             "background_tab": [9, 2, 35],             "background_tab_inactive": [8, 6, 15],             "background_tab_incognito": [8, 6, 15],             "background_tab_incognito_inactive": [8, 6, 15],             "bookmark_text": [225, 198, 255],             "tab_background_text": [225, 198, 255],             "tab_background_text_inactive": [167, 146, 188],             "tab_background_text_incognito": [167, 146, 188],             "tab_background_text_incognito_inactive": [167, 146, 188],             "tab_text": [225, 198, 255],             "toolbar": [44, 35, 77],             "toolbar_button_icon": [225, 198, 255],             "omnibox_text": [255, 255, 255],             "omnibox_background": [9, 2, 35]         },         "images": {             "theme_ntp_background": "images/ride_the_wave.png"         },         "properties": {             "ntp_background_alignment": "center",             "ntp_background_repeat": "no-repeat"         }     } }

Some additional fine-tuning

If you didn't notice, there's some additional fields in the manifest above that aren't in the one from the online editor.

In order for the inactive window to look weird, you will want to add the fields for the "frame" color for inactive/incognito windows. They follow the same naming convention as the other fields with inactive/incognito color options.

Step 2: Add the fixed theme to Chrome

To now test your completed theme, you will need to go to the extensions page at "chrome://extensions/" and turn on Developer Mode using the toggle on the top right of the page. This will allow you to upload the theme to your Chrome with minimum complexity.

You can now upload your theme by clicking the "Load unpacked" button on the top left of the page, which will allow you to select the folder containing your manifest JSON file and (optional) images folder, and upload it as your theme.

This is the easiest way to upload and incrementally test the configurations of your custom theme.

Once you have your theme exactly to your liking, you can optionally save it as a Chrome extension file by clicking the "Pack extension" button on the top left of the Extensions page, and again select the folder containing your manifest JSON and (optional) images folder.

This will create a CRX (Chrome Extension) file for you, which you can drag and drop onto the Extensions page to automatically add your theme (as long as you have Developer Mode enabled).