Suggestion: use material-ui for theming

[juiceo]

Just an idea: it would be pretty neat if this app could be themed easily from a single file. I think the following would be enough to make it look sufficiently personalised:

• Title font
• Body font
• Main theme color (currently green)
• Secondary color (accent color)

This could be done rather easily by doing the following:

1. Wrap the app in a material-ui `ThemeProvider, provide it the current theme colors and fonts
2. Replace all h1-h6, span, p, etc. text components with the material-ui Typography component
3. Remove the color definitions from styles/_base.scss, see what breaks, and replace the affected styles with one of material-ui:s css-in-js solutions.

See here for material-ui styling reference: https://material-ui.com/styles/advanced/.

Definitely a nice-to-have, but potentially a good first issue and would be one step more towards Ilmomasiina-as-a-service

[peksi]

@lappalj4 https://github.com/athenekilta/ilmomasiina/blob/otax/production/ENV.MD

Tääl on jotain jo teemoitusta mut hyvä idea kyl lähtee rokkaamaan parempaa iaas-experiencee

[kaakock]

@lappalj4

[Jonesus]

I like the customization idea! What would be the benefit of using material-ui instead of just ensuring that all colours and fonts are defined in one place (_base.scss or something else) and just guiding users to change them? Material-ui is quite a heavy package and IMO a bit bloated solution for something like this

[juiceo]

I think the main benefit is the ability to change the colors with just an .env file, which you can't do with scss, afaik - no need to fork the project to customize colors or fonts even. Also, I at least personally enjoy the way M-ui enforces/encourages actually using the theme you provide, with scss solutions I've found it's very easy to become lazy, and end up having declared 20 colors of which you use 2 or 3. Don't think the bloatedness is an issue since the mui styling system is an entirely separate module, and the other mui components can be imported with tree-shaking so it only bundles the ones you use. That's my $.02 anyway :-)

[Jonesus]

Fair points :) Regarding technical implementations though, I think changing the color via .env should be possible with the current architecture if we used standard CSS variables in sass, values for which could be parsed from .env in JS and injected to a root element as basic React inline styles. I think having both CSS-in-JS and sass might get a bit confusing to maintain in the long run, but I wouldn't mind switching the whole styling system into something like material-ui or styled components for example