How to let each user set its own primary color via a color picker?

1

Hi guys,

I would like each user to be able to pick his favourite primary color via a color-picker.
Afterwards the css-colors of fonts, buttons, backgrounds, etc. should change…

Kind of a runtime client-side sass compiler where @primaryColor re-renders all css…

Is there a way to do this using React + Bootstrap?

Are there other better ways?

BACKGROUND:
I am planning to build a white-label style saas - have not picked my full stack yet… I feel like react + bootstrap + sass/less is a good choice, but I am still open for alternatives…

2

Stupid Idea: Make a style block in the HTML & define the color there dynamically using a placeholder:

<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>

?

3

On the other hand, isn’t that something you could do with styled components too? You don’t have to use it for everything, but just for the things you want to theme if you like?

(I think, I have never worked with it)

But with the html- <style> - block you could probably get as far if you just define a few color classes there like

.primaryColor: ${someColor};
.primaryBackgroundColor: ${someOtherColor};
...

etc and then use these classes in whatever HTML you create?

Of course then you couldn’t use those values and lighten() and darken() them etc or inherit them into other classes. But maybe if you got creative you could still create the shades you need dynamically or with a handful of classnames like .primary-light .primary-superlight or .primary-20 .primary-40 . primary-60 etc and let css do its work by just including the right classes for your elements.

Ah ok. That’s the best I got :slight_smile:

4

Might check out the following…

1 Like
5

If you can shoot for evergreen browsers, I would use CSS variables.

1 Like