As some of you might know, Chrome started to have an official theme system in the last Dev build, but it is very limited. Read more here. (You can download a sample .crx theme here)

So I will show how to modify the .crx file to make your own customized theme:
Note: You will need a .zip decompresser and compressor like WinRar

1 - Right-click this link > Save link as... to save the .crx file to your drive.
2 - Rename the theme.crx to theme.zip
3 - Extract the files to a folder
4 - Go into the images folder
5 - Replace the theme_frame_camo.png with your custom header (top window background) image*
6 - Replace the theme_toolbar_camo.png with your custom button bar image**
7 - Delete or Replace the theme_ntp_background.png with your custom New Tab page background image
8 - Delete or Replace the theme_ntp_background_norepeat.png with your custom New Tab page background image no-repeat***
9 - Go back into the main folder
10 - Open manifest.json with notepad
11 - Replace "camo theme" with your theme's name
12 - Mess with the color codes to change different parts' colors (ie: "frame": [ 71, 105, 91 ],)
13 - Mess with the tint color codes to change the buttons' colors
14 - Set the version number to your theme's current version
15 - Save the file (Overwrite)
16 - Follow the instructions here to pack the .crx file or use Waha's Extension Manager
That's it!

*Note: This will also replace the header in Windows Vista & 7
**Note: The bottom of this image file is used as your bookmarks bar image
*** I have no idea what's the difference between the two so try it out


I hope I didn't make it too complicated for regular users, I did my best

EDIT: To remove custom theme, go to (Wrench menu) > Options, under the Personal Stuff tab, click the Reset to default theme button

Awesome! God I've been looking through the source off and on the past two days to try to figure everything about their theme iplementation out, I had just figured out the manifest format yesterday, and was really just looking for info on how the files were mapped to be for what part of the theme. Like if it was by filename or something, and what those filenames would be.
Glad to see I don't have to sift through that anymore. ^^

EDIT: I'll release everything I've found out and a new version of ExtensionManager with support for it later today. :]

Nice tutorial !
Didn't expect themes to be packed in .crx as well.

@Waha: Cool. I'm glad it was useful

@Kyrax: Me neither, until the admin sent me a PM asking me if I knew about them, then I read that blog and messed around the .crx to find out what did what.. But they don't have as much functionality as the default.dlls

Originally Posted by Stamga

@Waha: Cool. I'm glad it was useful

@Kyrax: Me neither, until the admin sent me a PM asking me if I knew about them, then I read that blog and messed around the .crx to find out what did what.. But they don't have as much functionality as the default.dlls

They actually do seem to, though I haven't really tested it yet. Almost there.

Uhg. x.x Okay I'm done with everything, figured out all the theme stuff, modified my object browser extension to browse theme components, updated ExtensionManager to be able to make themes. However I'm too tired to update all the posts necessary and stuff right now so I'll release everything in the morning.
However it turns out that either the themes are indeed not as powerful as the dlls, or I copied a resource incorrectly. I will go over it before posting in the morning.

Cool I can't wait to see their features!

Since I packed one of Stagma's themes, he's requested to post it himself, so look forward to that post as it's the only way I'm releasing all the image names. (No way in hell I'm typing all those!)
But here's my notes on the manifest for themes:

Code:

"theme": { //Optional
	"images": {
         "theme_frame": "http://www.chromeplugins.org/google/images/theme_frame_camo.png",
	}
	"colors": {
         "frame": [0-255, 0-255, 0-255], //r,g,b
         "frame_inactive": [0-255, 0-255, 0-255, 0-255?] //r,g,b,a
	}
	"tints": {
         "buttons": [0.00-1.00, 0.00-1.00, 0.00-1.00] //r,g,b
	}
	"properties": {
		"ntp_background_alignment": "top" || "bottom" || "left" || "right"
	}
}
//Themes only allowed with:
//  Extension::kDescriptionKey,= L"description";
//  Extension::kIconPathKey,= L"icon";
//  Extension::kNameKey,= L"name";
//  Extension::kPublicKeyKey,= L"key";
//  Extension::kSignatureKey,= L"signature"; //? unused? might be crx thing
//  Extension::kThemeKey,= L"theme";
//  Extension::kVersionKey= L"version";
//Strings used by themes to identify colors for different parts of our UI.
//  static const char* kColorFrame = "frame";
//  static const char* kColorFrameInactive = "frame_inactive";
//  static const char* kColorFrameIncognito = "frame_incognito";
//  static const char* kColorFrameIncognitoInactive = "frame_incognito_inactive";
//  static const char* kColorToolbar = "toolbar";
//  static const char* kColorTabText = "tab_text";
//  static const char* kColorBackgroundTabText = "background_tab_text";
//  static const char* kColorBookmarkText = "bookmark_text";
//  static const char* kColorNTPBackground = "ntp_background";
//  static const char* kColorNTPText = "ntp_text";
//  static const char* kColorNTPLink = "ntp_link";
//  static const char* kColorNTPSection = "ntp_section";
//  static const char* kColorNTPSectionText = "ntp_section_text";
//  static const char* kColorNTPSectionLink = "ntp_section_link";
//  static const char* kColorControlBackground = "control_background";
//  static const char* kColorButtonBackground = "button_background";
//Strings used by themes to identify tints to apply to different parts of
//our UI. The frame tints apply to the frame color and produce the
//COLOR_FRAME* colors.
//  static const char* kTintButtons = "buttons";
//  static const char* kTintFrame = "frame";
//  static const char* kTintFrameInactive = "frame_inactive";
//  static const char* kTintFrameIncognito = "frame_incognito";
//  static const char* kTintFrameIncognitoInactive ="frame_incognito_inactive";
//  static const char* kTintBackgroundTab = "background_tab";

So if what you're looking at is a little confusing, allow me to explain my notation a little.
Everything after a // is a comment, meaning it's not meant to be actually put into the manifest file.
As you can see, there's four possible - what are called - Dictionaries for theme. (A Dictionary in chrome manifest lingo is something in a {} set.) These are "images", "colors", "tints", and "properties". The first three were portrayed in the example crx released by Google, properties however was not. Now I don't really know what the currently one property actually does, I think it has to do with the theme piece displayed on the new tab page, but I haven't looked into it. The || here mean "or", which shows that the only possible values for this are those four that are listed.

Anyway, back to colors for a second, one thing that wasn't exampled about these was the alpha property. I couldn't really find info on the max values of the colours and stuff so this is kinda guess work, but considering the example values exceeded 100 my guess for the max is 255, however, alpha's might still be 100. Heck it might even be 0.00-1.00.
And of course, rgb stand for red, green, blue.
The tints' value limits were also a guess, but generally when decimals are used it's between 0 and 1, emulating a percentage (similar to 0-100).

Now below all that are the comments which are definitions I ripped from the source code, you can ignore all the Extensions::kWhatever,= L and related and just look at what's in the quotes. The first list, "Themes only allowed with" is a list of standard manifest properties that can be used in a theme's manifest. NO OTHER properties can be used, not even "format_version" oddly enough.

The next list are the possible properties to be used in the "colors" Dictionary.
And the last list is the same idea, but for the "tints" Dictionary.

Originally Posted by Stamga

16 - Pack the whole thing up using WinRar
17 - Rename your .zip file to a .crx file

I don't get those two steps. So can someone please help me because when I do them and I try to install the theme here's what I get:

Originally Posted by Clouds

I don't get those two steps. So can someone please help me because when I do them and I try to install the theme here's what I get:

Don't follow those steps, the crx format has an added header before the zip header, use the normal extensions packing method to pack it, after modifying the name and stuff in the manifest file.
That method is described here.