ryelle codes

MP6 has some awesome color schemes, but maybe you want to add more. Here’s how you can add your own in a plugin.

Edit (11/19): As MP6 was an experimental plugin, most of the code here will not apply to what’s been merged into WP 3.8. The idea is the same, though (except the customizer colors were dropped).

The plain CSS way

• Create your stylesheets (using one of the default schemes’ compiled css as a starting point).
  • You’ll want to copy admin-colors.css for the main wp-admin colors, and customizer.css for the customizer.
• (skip to adding your scheme)

The SASSy way (which involves a lot more file-copying than I’d like)

but once you’ve set all this up, creating multiple schemes is much easier.

• Copy over _admin.scss, _customizer.scss,  and _variables.scss from MP6’s components/color-schemes/schemes (make sure to merge down any changes made to these files, to stay up-to-date).
• Create a new sass file that just defines some variables (let’s call it colors.scss)
  • $base-color (the admin menu background),  $highlight-color (buttons, the current/hovered menu item), and $notification-color (the comments/update bubble) are the only variables required. $text-color might also be useful (menu text), if you’re using a lighter $base-color.
  • Check out the colors.scss file in any of the core admin schemes for examples. Pixel only defines the 3 minimum, while MP6-light defines a lot more.
• Note: We do differ from “normal” SASS here— you’re setting up the variables in colors.scss, to be used in _admin.scss/_customizer.scss, but since we have 2 files that need colors.scss, we can’t use @import (think about it for a second— we don’t want to duplicate any code, especially not variable definitions). Instead, we use Grunt’s file mapping to build out the 2 CSS files.
• Create grunt task that will process your files & create 2 .css files:
  • one file is ['colors.scss', '_admin.scss'], which creates the wp-admin styles
  • the other is ['colors.scss', '_customizer.scss'], which creates the customizer styles
• Note: It’s possible you can do this in CodeKit or whatever method you might use for preprocessing, the important thing is making sure you include colors.scss for both _admin and _customizer. Or, you can drop customizer support for your scheme and just create and admin stylesheet (it will default to MP6 style for customizer).

Adding your admin scheme

• In your plugin, use the helper function mp6_add_admin_colors to add it to the color scheme dropdown. Note that this will only work with the latest version of MP6, as this function was only added on 9/11 (also, as MP6 is experimental, this function might go away- always check if function_exists()).
  • The first parameter is required, which should be a unique name for your scheme.
  • The second parameter is an array of settings for your scheme.

label: the name of your scheme (will show up in the dropdown)
palette: an array of (hex) colors used to create the palette in the dropdown
icon: an array of base, focus, and current (hex) colors used by svgpainter to color custom icons added as SVGs.
admin_path: the full path to your admin stylesheet. If left blank (or if the file is not found), the scheme won’t be added.
admin_url: the URL to use for your admin stylesheet
customizer_path: the full path to your customizer stylesheet. If this is left blank/invalid, the customizer will use default MP6 styles.
customizer_url: the URL to use for your customizer stylesheet.

An example plugin file is embedded below (link to gist):

To see a full SASS example, check out the MP6 Color Schemes plugin on github.

Color Schemes in MP6 Core

If you’re working on MP6 itself, adding color schemes is easier. Create a new folder in schemes, the folder name should be your slug. Add colors.scss & define your variables, then edit the Gruntfile to generate the new CSS files. Edit colors.php to add the scheme- the admin & customizer paths are automatically grabbed from the slug, so aren’t needed here. Check out the other schemes in colors.php in components/color-schemes/ for examples.