- Export your settings
- Create the scheme file
- Generate the stylesheet file
- Combining everything
Step #1: Preparation
Play around with the Theme Customizer (Design > Customize) till your site preview looks just like you want it.
Note: Color Schemes do support almost every setting available in the Theme Customizer, EXCEPT images.
Think up a name for your Color Scheme, note it down in an empty file for future easy access, as well as the future scheme slug - consisting only of lowercase alphanumeric characters, underscores, minus sign, neither with spaces nor special characters like umlauts and similar stuff. Basically what a call of sanitize_key would return.
For this tutorial, we assume the name "Hello World" as Color Scheme name and thus its slug would be "hello_world".
Step #2: Export your settings
Head over to "CC Settings" and then switch to the "Backup & Reset Settings" tab.
Select "PHP code" as export format, check "Customizer Settings" and hit "Start Export".
This will export your prepared Theme Settings as regular PHP code (array), which is going to be the base of the default settings for your Color Scheme.
Create an empty file with the following namimg scheme: (scheme_slug).settings.php - in our example, this would be hello_world.settings.php
And copy + paste the above created export data (ie. the PHP array) into it. Do not forget to add the PHP opening and ending tag. The latter one is optional, thou. Save it into the default EXTERNAL Color Scheme directory, ie. (your_uploads_directory)/cc2/schemes/ (usually wp-content/uploads/cc2/schemes).
To adjust it further, compare your scheme settings file and the default Color Scheme settings file (default.settings.php) and remove non-required settings in the first one.
Step #3: Create the scheme file
Use the default Color Scheme file (default.json.scheme) as a template, adjust its settings accordingly and save it as (your_scheme_slug).scheme.json. In our case, that would be hello_world.scheme.json.
Example content of our Color Scheme:
'_font_family':"\"Century Gothic\", \"Avant Garde\", Arial, sans-serif",
Scheme variables explained:
|slug||the Color Scheme slug||required|
|title||the official title of our Color Scheme||required|
|file||the base LESS file which is being used with the Premium plugin to generate a custom stylesheet file; if you don't want to fine-tune stuff, you might want to leave at its default value (ie. style.less)||required|
|scheme||Contains the required 4 variables for the LESS generation (the underscore prefix indicates an internal variable). These are contained inside your default settings as well, but should be stored here instead. The variables are as follows:
|output_dir||the future name of the generated stylesheet file; also is being used as fallback for the LESS file if the plugin is not active; if none is given, the theme is assuming the file name as (scheme_slug).css||optional|
|output_dir||directory where the generated stylesheet as well as the fallback stylesheet file is being stored; %cc2_schemes% is a placeholder and refers to: (your_uploads_directory)/cc2/schemes/|
If left out, the theme is automatically using the default external output directory.
Step #4: Generate the stylesheet file
Head over to the CC Premium settings section and click on the button "Regenerate (output_file) manually" (eg. "Regenerate style.css manually"). As the name says, it will regenerate the stylesheet of the current Color Scheme. In our case, that is going to be the base stylesheet for the static mode and also fallback if the plugin is not activated or around.
Open the details with a click on "detailed information", note down the stylesheet path and copy THAT file as (your_scheme_slug).css into the default EXTERNAL scheme directory.
Last step: Combine it all
To quote The Excrementory Grindfuckers: "Please combine each part with another... part"
Add and adjust all above described variables, and then give it a test run by opening the Theme Customizer. Now, your new Color Scheme should appear and be selectable.
Notes on storage: Of corpse, you may save your Color Scheme inside the default Color Scheme directory ((your_themes_directory)/cc2/schemes/) as well, but beware: During a theme update, it might get overwritten or deleted.