Matt Gemmell

Skinnable Cocoa UI with WebKit and CSS

0 min read

Another chunk of Cocoa source code for you: this time it’s a demonstration of how to make your app skinnable using CSS. You can grab it from the Cocoa Source Code page.

Skinnable App is a simple Cocoa application showing how to use an embedded WebKit WebView to easily “skin” your applications, i.e. style your app’s UI using loadable standard CSS files, and how to exchange data between Cocoa and the HTML document. This makes it really easy to add support for “themes” or “skins”, for visual customization of your app’s UI.

The project shows you:

  • how to switch CSS themes dynamically
  • how to add content into the WebView from Objective-C
  • how to retrieve data from inside the HTML document
  • how to replace existing content in the HTML document
  • how to allow HTML controls (like form elements, or links) to call methods in Cocoa objects

This code was written on Mac OS X 10.5 (Leopard), and the project requires Xcode 3, but the code itself should run just fine on Tiger too. You can get the code from my public github repository.

Here are a couple of screenshots from the app; excuse the crappy CSS – I was focusing on the actual code!



Update: Now prevents selection in the WebView and suppresses the selection cursor, to better mimic native Cocoa UI.