Adding light theme based on operating system settings

[mamazu]

Related issues: #225

What

This pull request extracts all CSS colors out into CSS variables and adds support for light mode.

Here are some screenshots (I'm not a designer, so if the colors are off I'm open for suggestions):

How

Extracting colors into variables makes it able to be reused throughout the code and just having a set palette to reference. It makes it more consistent and easier to change.

In this case the light mode just sets different values for the variable and the rest of the rendering stays as is.

One thing to note here is that the SVG for the color scale is now also theme based. This is achieved by using currentColor in the SVG code which allows it to be styled with CSS.

Compatibility

In a "modern" browser everything should work. IE is definitely not supported but here is the full list of features and their adoption rate:

Feature	Adoption
CSS Variables	97.86% source
prefers-color-scheme	96.87 source

[NoiseByNorthwest]

Thanks @mamazu , I'll test it this week end.

[NoiseByNorthwest]

@mamazu LGTM, thanks !

[mamazu]

Nice thanks for merging if you want you can also close the related issue (at the top)

But scrolling through the issue list you said something about a webserver UI rewrite. Do you already have specific plans for that? Like overhauling the UI would be nice and adding some features like deleting or updating without refresh via Websocket.
Would you be open for those kinds of merge requests too?

[NoiseByNorthwest]

Would you be open for those kinds of merge requests too?

Not at the moment since the fact of improving current UI while developing a full rewrite could be a waste of time.

On the other hand, when the new version will be in a late pre-alpha stage I will publish it and I will obviously be open to any kind of contribution for a certain period of time before releasing it to ensure that the released version will take into account the most important requests of the community.