Integrate Theming infrastructure

[momesana]

Rationale:
Supporting dark themes is a common requirement in web applications these days.

Dod:

• use a very simple theme object with just a few attributes based on Antd's well-thought out theme seed token, namely:

• colorPrimary

• colorLink

• colorBgContainer

• colorBgElevated

• colorText

• colorTextSecondary

• colorWhite

• the theme info is made accessible to the app via a context. The context exposes a function to set the theme to either "system", "light" or "dark", the set of available themes ("system"| "light"| "dark" for now), and the currently selected value

• the value should be stored in the local storage.

• the browser when loading (that is before the theme kicks in) should use the browser preference for the color-scheme

• pass down the theme via styled-components

• in global styles the theme variables should be turned into css variables of the same name as well (css variables are easier to use but don't let you access the value in js to for example apply transformations. We'd like to have both available)

• derive css variables based on that theme object

• apply patterns of high cohesion and loose coupling (the theming infrastructure should all be in just one folder expoing a context provider that will wrap the app)

• the selected theme needs to be stored in localstorage lest it is lost during a reload. Before even react loads the preferred color scheme should be defined via css. When react is up and running we look into local storage to get the value for theme. If it doesn't exist or is set to system, we default to browser meaning we'll use the color scheme to whatever the browser tells us is the preferred scheme. If the value exists in the local storage we set it to that overriding the system.

• for testing purposes introduce a simple select (just the standard html select) with these three options so the user can change them at will.