Bookmarklet: Theme Colour Picker

Only of the features lacking in the current CRM Theme form is colour picker. I logged issue 1197446 in Connect regarding this. But, it seems this is not really a priority at the moment. You can use Guido’s CRM Theme Generator to get around this and it is really excellent, as it also gives you instant feedback on how the theme will look. But I still like to see a colour picker in the theme form. So, I developed a bookmarklet to do this.

Copy paste this code into your favorites/bookmarks bar and execute this when you have opened the theme form.

javascript: var contentPanel=$('#crmContentPanel > iframe');if(contentPanel&&contentPanel.length>0){var targetFrame=contentPanel[0].contentDocument;var Xrm=contentPanel[0].contentWindow.Xrm;Array.from(targetFrame.querySelectorAll('.ms-crm-ColorValueDirection')).forEach(function(d,i){var c=targetFrame.createElement('input');c.setAttribute('id',d.getAttribute('id')+'_colorpicker');c.setAttribute('type','color');c.setAttribute('style','display: block; width: 50px; height: 16px; right: -54px; top: 1px; position: absolute;');c.value=targetFrame.querySelectorAll('#'+d.getAttribute('id')+' span')[0].textContent;d.appendChild(c);});targetFrame.getElementById('tdAreas').addEventListener('change',function(e){var targetIdParts=e.target.id.split('_');if(targetIdParts[1]!=='colorpicker')return;var mainDiv=targetIdParts[0];targetFrame.querySelectorAll('#'+mainDiv+' span')[0].textContent=e.target.value;targetFrame.getElementById(mainDiv+'_colord').style.background=e.target.value;targetFrame.getElementById(mainDiv+'_i').value=e.target.value;Xrm.Page.getAttribute(mainDiv).setValue(e.target.value);},false);}
else
{alert('Cannot locate theme IFrame');} void 0;

Here in the unminified source.

var contentPanel = $('#crmContentPanel > iframe');
if (contentPanel && contentPanel.length > 0) {
	var targetFrame = contentPanel[0].contentDocument;
	var Xrm = contentPanel[0].contentWindow.Xrm;
	Array.from(targetFrame.querySelectorAll('.ms-crm-ColorValueDirection')).forEach(function(d,i){
		var c = targetFrame.createElement('input');
		c.setAttribute('id',d.getAttribute('id')+'_colorpicker');
		c.setAttribute('type','color');
		c.setAttribute('style','display: block; width: 50px; height: 16px; right: -54px; top: 1px; position: absolute;');
		c.value = targetFrame.querySelectorAll('#'+d.getAttribute('id')+' span')[0].textContent;
		d.appendChild(c);
	});

	targetFrame.getElementById('tdAreas').addEventListener('change', function(e) {
		var targetIdParts = e.target.id.split('_');
		if(targetIdParts[1] !== 'colorpicker') return;
		var mainDiv = targetIdParts[0];
		targetFrame.querySelectorAll('#'+mainDiv+' span')[0].textContent = e.target.value;
		targetFrame.getElementById(mainDiv+'_colord').style.background = e.target.value;
		targetFrame.getElementById(mainDiv+'_i').value = e.target.value;
		Xrm.Page.getAttribute(mainDiv).setValue(e.target.value);
	},false);
}
else
{
	alert('Cannot locate theme IFrame');
}

Here is how it looks after you have executed the bookmarklet.

Image may be NSFW.
Clik here to view.

I have tested this only in Firefox 43 and Chrome 47.

EDIT (27/01/16): Fixed hardcoded navbarbackgroundcolor in getAttribute. Apologies.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.