How to get bigger swatches in Chrome Developer tools

Chrome Developer tools is something I use consistently and daily.

It always drove me nuts who when scanning for a swatch coulor they were never located in a consistent location. That and they seem to small.

I guess back when chrome was at version 30 it used to have a custom.css file located in your chrome profile directory. That no longer exists so we will need to install an extension called DevTools Theme, you can use the Zero Dark Matrix or Flatland

The source for both themes can be found here:

To make some simple changes go to Manage extensions and inspect the icon of DevTools Theme: Flatland and look for the background location. This will tell you where the extension is installed.

For OS X this would be ~/Library/Application Support/Google/Chrome/Default/Extensions/ 

In my case I’m looking in ghngaepikegoilihhbhdipfbfifhkeeo and depending on what extension you installed might take some hunting but look for a class called swatch if you don’t have it then feel free to add it..

.swatch {
  width: 25px !important;
  height: 25px !important;
  border: solid 1px white;
  float: right;
}

Signup for my mailing list

Receive other rambings like this on design, code, and some times food.