Note: These instructions are for a branch of MP6 which is currently not up-to-date with the rest of MP6. MP6 is now using SASS, and while the theory is the same, details listed here are not accurate. Check out this post for a more up-to-date method of working with MP6.
There is now a new branch of MP6 using LESS to generate some color schemes. This includes a
Gruntfile.js; so you can build new themes using grunt.
To create new color schemes
Each scheme is a folder inside
components/color-schemes/schemes/, we’ll look at
seaweed/ for example. This contains a
colors.css is the file compiled by grunt, and is what the browser sees.
colors.less contains 4 lines: 3 color variables and an @import (the file that uses these variables to paint the admin). Create a new folder in schemes, and copy over
colors.less— change the 3 variables to your color scheme.
Install grunt, if you haven’t already. In the Gruntfile, there’s a list of files in the colors task:
'components/color-schemes/schemes/seaweed/colors.css' : 'components/color-schemes/schemes/seaweed/colors.less', 'components/color-schemes/schemes/lioness/colors.css' : 'components/color-schemes/schemes/lioness/colors.less', 'components/color-schemes/schemes/ghostbusters/colors.css' : 'components/color-schemes/schemes/ghostbusters/colors.less', 'components/color-schemes/schemes/blue-dream/colors.css' : 'components/color-schemes/schemes/blue-dream/colors.less', 'components/color-schemes/schemes/pixel/colors.css' : 'components/color-schemes/schemes/pixel/colors.less', 'components/color-schemes/schemes/80s-kid/colors.css' : 'components/color-schemes/schemes/80s-kid/colors.less'
This is the mapping of result : source files. Add a new line with your scheme’s folder, it should compile to
colors.css. Run the task with
grunt, or watch your changes with
Adding the theme to the admin
The last step is to add the scheme in
colors.php. Copy the
mp6_colors_register_schemes, and change the name & filepath (make sure to use colors.css). Reload the “edit your profile” screen, and the new schemes should be available.