Canvas Support

Chart.js and .adaptive-color-scheme (v6 Tip)

1 reply · opened Jun 14, 2020

PpardthemonsterJun 14, 2020

After applying the new class adaptive-color-scheme on a site I migrated to v6, I have found the NEED for additional code for pages with Chart.js and want to share with others in my same situation:

Assuming Charts have good contrast when not-dark (light), the following code (colors tweaked to suit) will likely be needed when dark is set by system, i.e. class adaptive-color-scheme:


	if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
		Chart.defaults.global.defaultFontColor = '#eee';
		Chart.defaults.scale.gridLines.color = '#696969';
	}

This could also be tweaked if charts are designed for good contrast when dark by substituting prefers-color-scheme: dark for prefers-color-scheme: light, but that was not my case.

This may be possibly worth incorporating on future Canvas v6.x deployment or worth noting on one of these pages:

http://docs.semicolonweb.com/docs/shortcodes/charts/

http://docs.semicolonweb.com/docs/getting-started/color-schemes/

SSemicolon WebSTAFFJun 14, 2020

Hello,

Thank You so so much for this very very Valuable piece of code! We really appreciate this. Meanwhile, we would like to tweak the code a bit and use this instead, added after the js/functions.js File:


	jQuery(document).ready( function(){
		if( jQuery('body').hasClass('dark') ) {
			Chart.defaults.global.defaultFontColor = '#eee';
			Chart.defaults.scale.gridLines.color = '#696969';
		}
	});

This would ensure that the Chart's contrast is changed only when the Dark Scheme is applied to the Page. Hope this Helps!

And Thank You so so much again for this Suggestion! We will definitely add this to the Documentation.

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard