Theming

[kristofzerbe]

Some prefer light themes to be easier on the eyes. The current change completes the work on theming of the last pull requests by me.

Features:

• set a prefered theme (dark or light) in meta.json to render as default
• switch themes in UI

[kristofzerbe]

Just for you to know. Just discovered two errors, I'm working on right now:

• Theme is not saved on page change (naah, stupid)
• Sparklines have fixed color #FFF

[maxboeck]

@kristofzerbe sparklines are instantiated from .js-sparkline elements. these could have a data-theme attribute to pass the theme definition to JS. the stroke color could then be set accordingly in sparkline.js.

[kristofzerbe]

Yeah, got this, but I have currently now idea how to recolor (or redraw) the lines in the client. I want to make it possible, that the user switch themes on-the-fly.

[maxboeck]

hmm - just spitballing here, but whatever method toggles the theme client-side could emit a custom Event, like:

const event = new CustomEvent('toggleTheme', { detail: "dark" });
window. dispatchEvent(event);

The sparkline script can listen for that event and then call drawSparkline again, with a color property that matches the theme:

window.addEventListener('toggleTheme', (e) => {
    const color = e.detail === 'dark' : '#FFF' : '#000'
    drawSparkline(canvas, data, true, color)
})

[kristofzerbe]

Events, yeah. Let me do a rewrite of the theming JS tomorrow...