Rework colors variables to use primary/secondary and make them configurable

[alimtunc]

I've added the simplest way I found to have custom CSS color on lemverse, but firstly I've replaced some SCSS color variables to be generic using primary and secondary keyword.

Now, we need to just need to update primary and secondary color on settings.json

[Donorhan]

The problem with this solution is that the project crashes on the import because, by default, the
_theme.scss file doesn't exist, I'm looking for a solution with an optional import system

[alimtunc]

Yes, don't worry. @ramnes suggested me to use something like this document.querySelector(':root').style.setProperty('--main-color', Meteor.settings.public.mainColor) to update it in the first runtime, with this, we won't need to have a separate file.

I will update my PR soon

[Donorhan]

Oh yes, it's a good idea!
I looked on my side in SCSS and it's complicated, there are optional imports but it only exists in LESS 😕

[alimtunc]

Ok, looks like it's more complicated than I thought.. we can't combine var(--primary-color) with the darken() function of SCSS https://stackoverflow.com/questions/64595291/is-there-a-way-to-use-sass-lighten-and-darken-with-css-variables

The only way to use CSS variables, would be to use a similar function like this https://stackoverflow.com/a/55330103 ... And actually we use darken() many times. Same as ligther().

[alimtunc]

Ok forget the hsl(), we can't use it too. To have the same color from #hex to hsl(), we will have a hsl function like this :

And the pain is, that we can't play easily with the darkness or lightness color. We should fine another solution for this. I let you check this to understand how light and dark work with hsl https://stackoverflow.com/questions/44703550/sass-color-darken-with-hsl-color-codes

[alimtunc]

Okay, all good for a review, color customization is now on settings.json 🙌 @Donorhan

[ramnes]

@Donorhan Is there anything we can do? :)

[Donorhan]

I'm not entirely comfortable with this integration. Going through JS and CSS variables seems a bit overkill to me and at the same time I haven't found any other solutions yet 😅

I did think about having a file that overloads the variables file at the build but the Meteor build seems a bit limited for that.

[ramnes]

Why does it seem overkill to you? That's how we achieved #158 as well so both PR are quite consistent.

The settings are read at runtime so if we want to keep all the configuration stuff there, we have to work at runtime as well and there isn't many ways.

Also, settings at runtime could end up being super useful if we want to make the UI theme editable on the level side later. :)