krz/omaha-metro-blotter

 1// Plotly bakes colours into the rendered figure, so the server needs to know the
 2// colour scheme before it builds one. Push the media query result into the
 3// theme store on load and whenever it changes; app.py styles from there.
 4(function () {
 5    var query = window.matchMedia('(prefers-color-scheme: dark)');
 6
 7    function publish(tries) {
 8        var dc = window.dash_clientside;
 9        try {
10            // set_props needs the layout rendered, not just the bundle loaded.
11            dc.set_props('theme', {data: query.matches ? 'dark' : 'light'});
12        } catch (e) {
13            if ((tries || 0) < 100) setTimeout(function () { publish((tries || 0) + 1); }, 50);
14        }
15    }
16
17    query.addEventListener('change', function () { publish(0); });
18    publish(0);
19})();