Can't change primary a:link color?
Closed this issue · 7 comments
I've created a child theme of this theme, and I can't for the life of me get the main a { } color (line 13 of styles/typography.less) to change. It seems like it should be so simple. I duplicate the typography.less file into my own child theme, same path at styles/typography.less. Go in and change the color of @primary-text to something else in variables.less. Then, in my init() of the child theme, add the line
$this->modifyStyle('stylesheet', array('addLess' => array('styles/variables.less'))); $this->modifyStyle('stylesheet', array('addLess' => array('styles/typography.less')));
Clear every cache I can, no change. It's still #0a818a. I have @primary-text set to #0f0080 in variables.less. But it does nothing. What am I missing? The hover styles change, but not the main unhovered state.
Also is there a way to disable the cache entirely while developing a child theme? It's so annoying.
Okay... so after a decent sleep I think I have an idea what's going on. #0a818a is a darker version of #10BECA, which is the default color of the HealthSciences theme chosen in baseColour option. This code in HealthSciencesThemePlugin.inc.php sets that darker color for @primary-text, overwriting whatever you may declare elsewhere in your LESS files for that same variable:
// Add theme options
$this->addOption('baseColour', 'colour', array(
'label' => 'plugins.themes.healthSciences.option.colour.label',
'description' => 'plugins.themes.healthSciences.option.colour.description',
'default' => '#10BECA',
));
// Update colour based on theme option
$additionalLessVariables = [];
if ($this->getOption('baseColour') !== '#10BECA') {
$additionalLessVariables[] = '@primary:' . $this->getOption('baseColour') . ';';
if (!$this->isColourDark($this->getOption('baseColour'))) {
$additionalLessVariables[] = '@primary-light: desaturate(lighten(@primary, 41%), 15%);';
$additionalLessVariables[] = '@primary-text: darken(@primary, 15%);';
}
}
If I go to my child theme's Settings > Website page, and choose a LIGHTER Primary Color, the a:link changes! If I choose a darker primary/base color, like the one I want, #0f0080, or black (#000000), it does NOT change. It defaults back to #0a818a.
This seems like a bug to me. People should be able to choose dark colors if they choose. I should stress though that it's only the a:link that doesn't change - the hover state changes to the darker color as it should.
All right! I was more or less able to get what I wanted by adding the below into my child theme's init(). :) Basically I copied that functionality over and accounted for darker colors. It's not perfect, probably, but experimenting with darker colors in the Primary Color color picker seemed to produce OK results. I just played around with the lighten, darken, and desaturate LESS functions until I got something agreeable.
public function init() {
// Use the parent theme's unique plugin slug
$this->setParent('healthsciencesthemeplugin');
// Update colour based on theme option
if ($this->getOption('baseColour') !== '#10BECA') {
$additionalLessVariables[] = '@primary:' . $this->getOption('baseColour') . ';';
if ($this->isColourDark($this->getOption('baseColour'), 90)) { // the second parameter is used to calculate brightness less than 90, then less than 130, then less than 255
$additionalLessVariables[] = '@primary-light: desaturate(lighten(@primary, 41%), 15%);';
$additionalLessVariables[] = '@primary-text: desaturate(lighten(@primary, 41%), 55%);';
}
else if ($this->isColourDark($this->getOption('baseColour'), 130)) {
$additionalLessVariables[] = '@primary-light: desaturate(lighten(@primary, 41%), 15%);';
$additionalLessVariables[] = '@primary-text: desaturate(darken(@primary, 30%), 50%);';
}
else if ($this->isColourDark($this->getOption('baseColour'), 255)) {
$additionalLessVariables[] = '@primary-light: desaturate(lighten(@primary, 41%), 15%);';
$additionalLessVariables[] = '@primary-text: desaturate(darken(@primary, 30%), 50%);';
}
}
$this->modifyStyle('stylesheet', array('addLessVariables' => join($additionalLessVariables)));
// Modify the Parent Theme's stylesheets with styles from this child theme
$this->modifyStyle('stylesheet', array('addLess' => array('styles/variables.less')));
$this->modifyStyle('stylesheet', array('addLess' => array('styles/typography.less')));
$this->modifyStyle('stylesheet', array('addLess' => array('styles/components/header.less')));
// Add new/additional stylesheets not found in the parent theme but inside this child theme
//$this->addStyle('child-stylesheet', 'styles/index.less');
}
/**
* Get the display name of this plugin
* @return string
*/
function getDisplayName() {
return __('plugins.themes.PLUGINNAME.name');
}
Plugin for updating a cache after every page load: https://github.com/NateWr/cacheBuster
You don't need to duplicate theme's style files from the child theme. Just create a new one. You also can override LESS variables and make a workaround with CSS specifiers: https://css-tricks.com/specifics-on-css-specificity/#article-header-id-0
And you are right if one changes a primary color variable for darker colors, 2 other color variables that are intended for border, text and background colors change correspondingly. So, you are pointed that one element doesn't change as it should? And you are talking about a links, such as DOIs or links in references?
Thanks for the plugin recommendation, I'll use that.
When I say the color of links doesn't change when you choose a dark Primary Colour, I mean literally every anchor link <a> on any page. On line 13 of healthSciences/styles/typography.less, the color of anchor elements is set to @primary-text. Then, in healthSciences/styles/variables.less, @primary-text is set to #0A818A. But this variable's value here doesn't seem to matter, because in healthSciences/HealthSciencesThemePlugin.inc.php on line 38, @primary-text is set to darken(@primary, 15%), so it's being set there to the @primary variable darkened by 15%.
Line 36 on HealthSciencesThemePlugin.inc.php seems to say "if this color ISN'T dark, then set @primary-light to X and set @primary-text to Y". But there's no setting for if the color IS dark, so, it just defaults to what's set in variables.less for @primary-text. So your custom Primary Color doesn't take effect. Hope that makes sense.
Hmm. The color of some links (a elements) changes when I'm doing this on the test installation (and for darken colors too). For example the color of dropdown links in the header. Don't think that all links' color should be a subject for change in this case. I'm talking about task bubble color, URL links, etc.
@sssoz, what do you think about this, was this in the concept?
The code here: https://github.com/pkp/healthSciences/blob/master/HealthSciencesThemePlugin.inc.php#L36-L39
indicates that if the base color is set to be in a dark pallet, change accordingly 2 LESS variables. So, if the color isn't dark, the default rules for this variables would be used.
Probably fixed. Closing.