Ok, so I took your advice and added a method within my widget to match the current theme. It is pretty sloppy and could probably be handled much better, but this is what I came up with (I use jquery in most of my widgets):
_matchTheme: function(){
var selectors = this.config.widgetThemeSelectors.join(', ');
var bg_color = $('div.jimu-widget-header-controller').css('background-color');
var widgetSelector = $('div.' + this.config.rootHtmlClass);
widgetSelector.parent().find(selectors).css('background-color', bg_color);
var rgb_vals;
if (bg_color.startsWith('rgb(')){
rgb_vals = bg_color.split('(')[1].split(')')[0].split(',');
rgb_vals.push('0.7');
} else if (bg_color.startsWith('rgba(')){
rgb_vals = bg_color.split('(')[1].split(')')[0].split(',');
rgb_vals[3] = '0.7';
}
if (rgb_vals){
widgetSelector.find('.jimu-btn').hover(function(){
$(this).css('background-color', 'rgba(' + rgb_vals.join(',') + ')');
}, function(){
$(this).css('background-color', bg_color);
});
}
},
I wanted to make the selectors to stylize configurable, so those are properties that get set within the configuration file, in the case of this widget, this part of the config looks like this:
{
"rootHtmlClass": "rental-density",
"widgetThemeSelectors": [
".jimu-panel-title",
".jimu-title",
".jimu-footer",
".jimu-widget-title",
".jimu-panel",
".jimu-btn"
],
...
}
This seems to work pretty well, but feels like too much of a hack and I'm not sure if I like it. Robert, how are you handling this? Do you have a snippet of code you could share? You are the widget master, so I'm sure you're handling it way better/cleaner than me