Extract Color From a CSS File

In this post I want to share with you a small command line tool that I wrote a little while ago. I was once faced with a very simple task, I needed to change the color scheme of the theme. It included changing the link color, the link hover color and the colors of some secondary elements. The task itself is very easy but does have some perks, so I decided to automate it.

If you were to change the color manually you would search and replace it in a CSS file. It is okay if you can override the whole file. But what if you can’t or don’t want to do that?

In this case, you need to create an additional small CSS file that contains only selectors that define site’s color scheme.

You still can do it manually by searching all the instances of a color, copying the selectors into another file and combining them by property.

This kind of manual solutions is a nightmare to maintain. Imagine if the theme author decides to rename the selector for some reason during the next theme update. You’ll have to do the search-replace-copy-paste thing all over again.

I thought that there should be a simpler solution for this kind of tasks. Turned out there is not. Or maybe I didn’t look good enough. Anyway, I decided to create my own tool that would extract the color from CSS file. I also thought of it as a good way to practice JavaScript outside of WordPress theming world.

Introducing css-color-grab-cli

So here’s the solution I came up with. It is a command-line tool that is built on Node and distributed through npm. After you’ve installed node and npm you can run this command in the terminal:

npm install -g css-color-grab-cli

This will install css-color-grab-cli globally and you’ll be able to run the following command from terminal:

css-color-grab

How it works

Let’s assume that we have a short CSS file called style.css that looks like this:

body {
  margin: 0;
  color: #585858;
  background-color: #ffffff;
  line-height: 1.5;
}

h1 {
  color: #585858;
  font-size: 3em;
  margin-bottom: 1.5em;
}

p {
  color: #585858;
}

.entry-meta {
  background-color: #ffffff;
}

If you navigate to the same folder where this file is located, the following command will grab all usages of the #585858

css-color-grab 585858 style.css

and output them in the terminal:

body,
h1,
p {
  color: #585858;
}

You can now copy this output, change the color and use it in a child theme. Or in a Jetpack’s Custom CSS module.

If you want, you can copy the output right away with this one-liner:

css-color-grab 585858 style.css | pbcopy

or save it to another CSS file in the same directory:

css-color-grab 585858 style.css dark.css

Restrictions

At the moment this plughin is in a highly experimental stage and have some restrictions:

1. The color value must be passed without the pound(#) sign
2. There is no support for rgb, rgba, and named colors yet

The project is available on Github, and you are welcome to submit issues and pull requests.

If you have another approach on automating this process, or have any suggestions on how to improve this tool, please share in the comments.