Git Product home page Git Product logo

editchromethemes's Introduction

How to edit Chrome Themes

Introduction

This is a guide to help you edit your existing Chrome themes to change the default text colors and background images on New Tab page. It is fairly simple to do, and should take around 15 minutes, more or less.

Getting started

You will need to have Google Chrome installed on your computer as well as some text editor. I like Sublime Text but feel free to use any editor you like better.

You will need to have downloaded a pre-existing Chrome theme to begin. Browse the theme store to find one you like, and hit "Add to Chrome". Once you have a theme, we will want to find the folder it saves to.

Find the folder with your theme

  • Windows

    You will need to show hidden files to see the folder. Do this by opening the Control Panel. If you're on Windows 8 or newer, the fastest way is Windows key+X, then P. Click into Appearance and Personalization, then Folder Options. Go to the View tab. There will be a list of advanced settings - we want to find the Hidden files and folders option. There should be two radio options - select the Show hidden files, folders, and drives* one. Click Apply and you're done.

    Open File Explorer (Windows+x, e) and navigate to this folder. User Name shoul be replaced by your user name. C:\Users\**User Name**\AppData\Local\Google\Chrome\User Data\Default\Extensions

  • OS X

    Open Terminal and type defaults write com.apple.finder AppleShowAllFiles YES to show hidden files. Navigate to ~/Library/Application Support/Google/Chrome/Default/Extensions to find the folder containing Chrome extensions.

  • Linux

    Open your file manager in root (sudo nautilus in Ubuntu) and press ctrl+h to see hidden files. Navigate to ~/.config/google-chrome/Default/Extensions/ to find the extensions. You could also enter into a Terminal: sudo vim ~/.config/google-chrome/Default/Extensions/ to edit the file directly.

Find your theme

In the folder you opened, you will find a long list of folders, all of which have titles that look like random letters.

One of these contains your theme, and the rest are other themes or extensions you have installed. Sort by Date Modified. The most recent one should be your theme, assuming this theme was the one you installed last. Open the folder, go into the version folder, and look for a file called manifest.json.

Edit manifest.json

The manifest.json file is the "command center" for your theme. It controls the layout and details of your theme. Right-click it and open it with a text editor. If you're in the right folder, it'll look something like this

You'll want to be careful with what you're editing in the manifest.json file, since it controls so much, but anything within the theme subsection should be fair game. Google provides their own official documentation for theme attributes. You can change text colors by changing the RGB values associated with them.

It's a good idea to edit the name field too since you'll be making your own custom theme.

Changing images

You'll also see an images subsection in the manifest.json. Here you can specify what images will be used, and where. To change an image, you'll need to put the changes in the images folder, which can be found in the same place you found your manifest.json.

For example, if you'd rather have a different background image on the New Tab page, just rename your image eyes.png and copy/paste it into the theme's images folder, replacing the current tab.png as you do.

If you have a .jpg you want to use instead, that's fine. Just paste it into the images folder and change the line of code in the manifest to refer to your .jpg instead. In this example, if you had an image called cat.jpg, you would change line 22 to "theme_ntp_background": "images/cat.jpg",

Loading your new theme

To see how your new theme looks, you can add it to Chrome. To do this, you'll need to enable Developer Mode. Go to Your chrome settings (chrome://extensions) and check the Developer Mode box and restart Chrome. Click Load unpacked and a window will open allowing you to select your folder. Navigate to your extension's version folder and select it.

Click OK and your theme will be applied! Admire your new theme and give yourself a pat on the back - you just made your own awesome theme!

.crx loading method

You can build a .crx with the Pack Extension button. You will receive a success message saying that Chrome made you a .crx and a .pem. The .crx is your new theme. Since Chrome v75 loading locally-packed .crx extensions via left-click/opening in Chrome is blocked. If you'd like to share your theme, you can zip your version folder and have other people unzip it and load unpacked. Alternatively, a workaround is to drag and drop the .crx into the Chrome window, this appears to bypass the security checks for now (as of v99/early 2022).

editchromethemes's People

Contributors

mike-u avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

editchromethemes's Issues

theme works despite manifest

Hi, i've tried editing a theme with virtually no success, so deleted the manifest file, and yet, it still works.

Is there a backup saved somewhere?

File location may have changed

On my mac, the file location for theme/extensions was .../Chrome/Profile 1/Extensions instead of .../Chrome/Default/Extensions

I don't know if they've changed it to be this format or if it was just for me because I have a guest profile enabled

Last step- opening crx does not work

Hi! Thanks so much for the guide, it was very clear and helpful to a novice like myself. The only thing I wanted to comment on was that the last step, opening the .crx file in google chrome, did not work for me. Instead, I had to click the "Load unpacked" button within chrome:\\extensions developer mode, then choose my file directory that I had just packed.

How to change text colour.

Hey thank you so much for this guide. Helped a lot. I need to change the colour of the Gmail, images, apps and google notification button from black text to white. How do i do this as i changed every RGB value in .json file and none of them touched it. LINK TO WHAT I MEAN http://imgur.com/a/GUxg7

Thanks
capture

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.