For awhile, I've wanted to theme Safari's Web Inspector—the incredibly useful built-in website viewer/debugger/designer assistant—with the Crystal Black look and feel, but it wasn't immediately obvious how to do this. I assumed that the tool was just a part of Safari, and therefore built with classes and widgets from the Cocoa AppKit (which is the framework all Cocoa apps are built with). However, when I began to inspect the Inspector, I discovered that everything contained within its borders was simply web content: HTML, CSS, JavaScript, and images.

In other words, the Web Inspector tool is nothing but an intricate, sophisticated, and extremely well designed web page!

Having built a Crystal Black CSS file for web pages in general, and with my past expertise in CSS, I attacked this challenge with relish! It reminded me of the time I realized that Dashboard widgets are, at their core, nothing but little web pages (as are simply apps for the iPhone). In tackling this one, the main question was, How should the various elements look? And the hardest part was inspecting the various parts in of the Inspector in great detail to determine which CSS rules governed their default appearance and behavior.

As I discovered, the WebKit has a a sub-framework called "WebCore," which in turn has a folder of resources specifically for the Web Inspector. In the Inspector folder, among other things, is a suite of CSS files that handle different aspects of the Inspector's design and behavior. Of these, the primary one I needed to tweak was called simply "inspector.css."

Full article