Great! I've had a play around with this and figured out what's going on. First, I hadn't caught it before, but this line:
$this->modifyStyle('cjarStyles', array('addLess' => array('styles/index.less')));
The first argument,
cjarStyles, should actually reference the name of the stylesheet you want to modify. The default theme calls it's stylesheet
stylesheet, so if you want to modify it, you'd use:
$this->modifyStyle('stylesheet', array('addLess' => array('styles/index.less')));
That got your variable sheet working. But you'll notice your variable sheet still isn't overriding the
@bg-base variable. That's because the parent theme sets this dynamically based on the
baseColour theme option:
Anything added with the
addLessVariables key will fire after anything added with the
addLess key. Since this code in the default theme runs as soon as you call
$this->setParent(), the variable override takes some extra work to get around this. If you don't want the theme to allow colour selection from the theme options area, you also need to add the following:
// This removes it from the theme options area in the settings, but if
// the user has already saved a baseColour in the parent theme, the
// value will still be retrieved and used, so...
// ...you also need to override the `addLessVariables` value that's
// already been attached with the color. Just set this back to empty
// to remove the color selection.
$this->modifyStyle('stylesheet', array('addLessVariables' => ''));
In reality, you probably want to leave the colour option in place and let the user set this. But hopefully this clears up a bit how the LESS overrides and theme options interact.