For developers

A map, a chart or a chat window that draws its own colours can follow the switch. Three things are there for your scripts:

• The class trdm-on is on <html> whenever the page is dark, from the first paint.
• window.trdm.isDark() answers true or false at any moment once the plugin's script has loaded.
• The event trasl-dark-mode:change fires on document once when the page has loaded and once each time dark mode comes on or goes off. event.detail.dark is true or false, and event.detail.why says what changed it: start (the page loaded), click (the switch or a menu item), key (the keyboard shortcut), device (the reader's device changed between light and dark) or schedule.

function follow( dark ) {
	// Your chart's or map's own way of changing its colours, for example:
	chart.options.color = dark ? '#e8e6e3' : '#222222';
	chart.update();
	// or, for a Google map drawn with styles: map.setOptions( { styles: dark ? nightStyles : null } );
}
follow( !! ( window.trdm && window.trdm.isDark() ) );
document.addEventListener( 'trasl-dark-mode:change', function ( e ) {
	follow( e.detail.dark );
} );

Ask isDark() when your script starts as well as listening: a script that loads late misses the event fired at the start. On a page dark mode does not apply to, window.trdm is not there, which is why the example checks for it, and at a screen size Display Rules leave out the page is never dark and no event fires.