: Theming Yosemite: Part 2 - Editing .car files

ThemeEngine

The obvious first step when trying to theme something is by looking for the actual images you want to theme. In Yosemite OS X, this would be the SystemAppearance.car file. Inside this .car file includes most of the UI images for the OS. Including color values for text, image glyphs and more.

.car is a compress archive or as Xcode calls is an Asset Catalog. Unlike .zip, .rar, etc you just can't uncompress it and compress it easily with known programs. There is one program I have been using (there is a few) called ThemeEngine. ThemeEngine (pictured above) is created by the same person who created the Zeppelin tweak for iOS (along with a bunch of other things). You can download this app from the creators github. HERE

READ: Before even going any further if you are interested in doing this please backup your SystemAppearance.car and GraphiteAppearance.car these files are located in

/System/Library/CoreServices/SystemAppearance.bundle/Contents/Resources/

One great feature of this app (that currently doesn't work for me now, get to that later), is the ability to open these images directly to photoshop. By pressing command and the up arrow it will "upload" this to photoshop, once edited go back to the app (with the same image selected) press command down "download" to replace the .car contents. I referred them to upload and download this is no where in the documentation or do I know if this was the devs idea, but it's just how I remember it easily.

That seems very useful and is. I was able to use it for about 10 images, then I moved on to colors. This app handles text color and images. I started with colors first just to see how things went. After I mapped about 50 colors (which took a lot of tinkering and rebooting) I started on images again and they would not open. Instead they would just simply open in the preview.app. Frustrated as I was I emailed the dev. I didn't really expect and email, and never received one either. So next step try and fix it myself. I tried and tried to no avail, but I found a solution that worked.

(Only do this is the command + up and command + down only opens in preview.app) Simply look for a .png file anywhere on your system. Right click and click more info go down to open with and set to photoshop (default is preview.app) Once I did this I could command + up arrow and it would open photoshop. I could not command + down to replace the image, but I could save the image to desktop and drag it into ThemeEngine. By doing this I noticed that every image I uploaded was 2px x 2px bigger than the original image, so I manually changed the canvas to be 2px x 2px on every image. More difficult yes, but it's all I could/can do.

Another way of going about this is to export the all the images to a folder. This is done by going to file and choosing export (in ThemeEngine) this will export all the images to a folder. It is a good thing to do this as this is the way I found out the images were 2px x 2px bigger than normal. The downside is the images have names such as

PullDownButtonTextured_Regular.psd.base.universal.regular.off.horizontal.normal.inactive.threeparthtile.threeparthorizontal.0.000.00.@1x and there is over 3k images. Which is difficult to understand or even see to replace thousands of images correctly. Since ThemeEngine doesn't have an import all function doesn't really make theming images this way any easier, but good for reference.

Best practice

I started headstrong and just backed up my SystemAppearance.car and began replacing images. Restart the computer and boom see images change. What I didn't take into consideration at the time was changing from stock UI to themed UI. If you theme the SystemAppearance.car then that will be your "stock". Instead of doing this start theming the GraphiteAppearance.car come to find out SystemAppearance.car will always load, but whatever is in GraphiteAppearance will override stock when the graphite selection is selected in SystemPreferences/General. So if you would like to have stock "white" colors during the day and "dark" during the night you could easily switch this in system preferences if you theme the Graphite instead.

Image sizes. Keep the images exactly as they are, if you change the image size then more than likely the image won't show at all. If you forgot what image you changed, then you're in a world of trouble and may just have to start over. (BACKUP YOUR THEME OFTEN). Speaking from experience...

Tricks

I said theme the GraphiteAppearance.car but if you open it there is nothing here. Maybe a couple images. To give you a good starting place take your original SystemAppearance.car and name it GraphiteAppearance.car, put in

/System/Library/CoreServices/SystemAppearance.bundle/Contents/Resources/ then open the car in ThemeEngine. Now you have all the images you need to theme.

I wasn't planning on doing a full theme for public release. One thing was keeping me from it was whenever a window is inactive the top of the window would go white "stock". There is no image theme-able that would fix this (I tried them all). BUT there is a way around it:) Inside the SystemAppearance.car or your GraphiteAppearance.car (if you followed instructions above) there is a section called WindowFrame_WindowShapeEdges. Basically images/masks here are for the round edges of each window. What this has inside it is the WindowFrame_WindowShapeEdges_Regular@2x file. This file is the small white bevel on top of every window, by theming this the color as you want your top to be, then you can have a themed inactive window. Think of it as this image is an overlay of the top bar, since you theme the overlay fully instead of just a small white bar, then the whole top will be themed. Since it is controlled by a mask nothing looks out of place.

Every image you change will not change immediately. You will need to reboot. Sometime you can go into systempreferences and toggle between blue and graphite, but majority of the time it requires a restart. Another trick I use is sudo killall -HUP WindowServer in terminal this will restart the GUI and take you back to the login screen.

Images are named with the image type example WindowShapeEdges followed by Regular@2x - retina at regular size, Regular.png - non-retina at regular size, Small@2x - retina at small size, Small.png - non-retina at small size, Mini@2x - retina at mini size, Mini.png - non retina at mini size and so on.

If you are interested in my theme subscribe here and I will send you an email when it's ready: SUBSCRIBE