Is possible change colors on-the-fly without compile?

[otavioserra]

I want to create some kind of color picker to my users change colors in the application and apply it to Fomantic UI (2.8.8). I can't found any kind of examples that do that in the documentation or here. I only found forms to change themes colors when it's on developer ambient. So, to change colors I need to compile CSS always. This is good to prepare application, but to change colors dynamic isn't. It was my mistake or there are some form to do that?

Thanks

[lubber-de]

If you want to create FUI style classnames for new colors (mintgreen, moonblue, etc.) you have to recompile, because the colors are build into each element out of the central colors.less file
I explained that a bit more at #402 (comment)

The FUI approach is to declare a color name which affects all elements. But as many elements have different shades of colors in parts of their appearance this is not a single color to be taken care of.

What exactly is your use case to change colors of each element on the fly? If it's only for a single element, you might try to use css variables only for that.

[deanp70]

Hey @lubber-de, I hope it's ok I'm barging into this discussion, but I found it trying to search for an issue I have building Fomantic, and maybe I can get your help and if someone else searches for this, they'll find the solution here too.

I'm trying to build Fomantic (without any changes), and I get this error as well. I'm not sure how that makes sense, since I'm assuming to create the distribution, you should just follow the instructions. Specifically the error I get is:

(node:80316) UnhandledPromiseRejectionWarning: Error: Error in plugin "gulp-less"
Message:
    Error evaluating function `darken`: Argument cannot be evaluated to a color in file {path}/src/themes/default/modules/popup.variables line no. 53

Any ideas on how I can resolve this? I can't find anything searching through the interwebz
Thanks in advance 🙏

[lubber-de]

Mmh, if you really did not change the mentioned file, and freshly installed from nom then i believe you have an old LESS version by whatever reason.
How did you install fomantic? Via bpl Install or did you clone the repository? However, try to go into the fomantic folder and try npm install which should take care of the proper less version needed by fui (3.7+ or 4.x if you use fui 2.8.8)
After that try npx gulp build to build fui which should give no errors anymore.

If you happen to just use semantic.less in your less project, then this should be same reason (very old less version) in this case update your less compiler version as well

[deanp70]

Thanks for the quick response @lubber-de! Would your answer change if I added the bit of information that I'm working with an M1 laptop. I don't think it should, but maybe there's some known issue.

One of the strange things that I couldn't resolve is after npm install it seemed that many of the packages were not installed and I had to manually add them in order to build the package.

Will try again with a clean install

Just to be sure:
after initializing an empty project I should npm install fomantic-ui then after it's done it will go through the install, I should choose default all, then go to node modules and do npx gulp build?

Am I missing something?

[lubber-de]

It does not matter what kind of laptop you use.
Yes, basically npm install --ignore-scripts fomantic-ui and npx gulp build should do it .

[deanp70]

It indeed works now. Thx, I probably screwed something up along the way. Thank you very much for your help and responsiveness!

[lubber-de]

If it's only for colors then try to use CSS Variables directly in the central color file
https://github.com/fomantic/Fomantic-UI/blob/develop/src/themes/default/globals/colors.less

[otavioserra]

@lubber-de

I will try to explain my use case in more detail: I have a platform that any user, via the configuration panel, can choose any color using a color picker. With any color chosen, I would like to apply the same color to a FomanticUI element dynamically. For example, the user chooses a specific color #456389 and that color is dynamically applied to the primary button (#456389 - this color is purely hypothetical).

When you said to use CSS variables, I could see in the CSS documentation that I can define a variable in one CSS file and then in another CSS file get the value of this variable. So, when my user makes a choice of color, I create a variable.css file with the definition of this value. So I create the following 'variables.css' file with this reference:

:root {
  --fui-primary-color: #456389;
}

Then I need to reference this same color in 'semantic.css' somehow so that this color can be dynamically read by FomanticUI. In the previous case, I tried to do this using site.variables . But for some reason, LESS does not support reading CSS variables in the format "var(--variable-name)" as per the CSS documentation like this case I tried to compile:

@primaryColor        : var(--fui-primary-color);

So, is there any way to reference these dynamic colors in FomanticUI without having to compile? In other words, modify colors on-the-fly without having to define predefined color palettes?

[lubber-de]

Please see my answer above where i explained that LESS functions do not work with css variables. If you want css variables make sure that every usage inside of fomantic uses css variables instead of calculating them at build time.