Can I change a global color variables from the custom JS?

Ask us anything How do I?
1

So the question is in subject.

  1. I create a color variable in assets.
  2. I use it in some components.
  3. I change it from the custom JS.

Is it doable? WeWeb AI tried to do this, but failed.

So we can easily GET the variable
globalContext.colors[/* primary-light */'6cd5e7cf-1f5a-4959-b584-20d36a943824']

Can we SET its value?

2

I don’t think you should change a global color that not what it’s designed for. You can however set a standard variable to be a colour and use that tho. What are you thinking of using it for?

3

I have some integration with embedded messenger apps, which inherit user style settings. And still, I have a brand-colored interface for a web browser. So my idea is to use default brand colors if no integration is present, but if the integration is present, do a one-time setting of colors over the brandbook ones.

The goal is simple: when we develop UI with WeWeb, it’s easier (and more correct) to use the colors from the library. But outside WeWeb, in a programming world, whose color vars are easily changeable.

So I want to use colors and update color palette if needed instead of inventing another dynamic colors which can have a lag on loading and isn’t so easy to use in WeWeb editor UI.

My main ideas are:

  1. Make a function get_color(palette_color,integration_color_var) and check if the color is loaded.
  2. Make a variable/collection of colors, loading initial colors from the palette and then overwriting if integration is present.

Both variants are hacks and workarounds. Palette should be accessible to work with as it’s just a list of CSS variables.

4

it its possible I did it!

function updateAllColors(globalContext) {
const colorMapping = {
‘colorfromNeptuneUI’: ‘NewColor’
};

// Create an object to store only the updated colors
const updatedColors = {};

// Update the colors and store the updated ones in the result object
for (const [oldUUID, newUUID] of Object.entries(colorMapping)) {
    globalContext.colors[oldUUID] = globalContext.colors[newUUID];
    updatedColors[oldUUID] = globalContext.colors[oldUUID]; // Store updated color
}

// Return only the updated colors
return updatedColors;

}

// Usage
return updateAllColors(globalContext);

1 Like
5

could you please update it to have a one code block. kinda messed with this function.

maybe I’m doing it wrong, but:

function updateAllColors(globalContext) {
  const colorMapping = {
    'primary': '#ff9900'
  };

  // Create an object to store only the updated colors
  const updatedColors = {};

  // Update the colors and store the updated ones in the result object
  for (const [oldUUID, newUUID] of Object.entries(colorMapping)) {
    globalContext.colors[oldUUID] = globalContext.colors[newUUID];
    updatedColors[oldUUID] = globalContext.colors[oldUUID]; // Store updated color
  }

  // Return only the updated colors
  return updatedColors;
}

// Usage
return updateAllColors(globalContext);

results in:

image
image323×186 7.94 KB

and no color changes in elements where this color is used (like the green icon).

chrome_YVUra3P41L
chrome_YVUra3P41L432×895 31.1 KB

6

Aha, this way (with var binding) it works:

image
image943×860 73.7 KB

function updateAllColors(globalContext) {
  const colorMapping = {
    'c5446bca-f48a-41c8-ab89-48fcd7d4d046': '#ff9900' // UUID → HEX
  };

  const updatedColors = {};

  for (const [uuid, hex] of Object.entries(colorMapping)) {
    globalContext.colors[uuid] = hex;
    updatedColors[uuid] = hex;
  }

  return updatedColors;
}


console.log(globalContext.colors);
console.log('Before:', globalContext.colors['c5446bca-f48a-41c8-ab89-48fcd7d4d046']);

var ret = updateAllColors(globalContext);
console.log('After:', globalContext.colors['c5446bca-f48a-41c8-ab89-48fcd7d4d046']);

return ret;
7

This JavaScript way sounds like a lot of overhead, possibly slowing down the load etc. I prefer using CSS variables.

1 Like
8

What do you mean in this case? How I see it:

  1. I can set a color from a library (and this color is already a css variable).
  2. I’m able to overwrite the color scheme keeping all the bindings.

Similar way like we have normal variables with “default” and “current” state.

So after I overwrite the color programmatically I would love to see the changes in my project AND assets page. And similar way to variables, if I refresh the editor, I wanna see the default colors.

@Joyce is it possible? Can you ask the team if it has any chance to be implemented?

9

I don’t use the WeWeb’s variables for many reasons, only spacings, classes and some other things. The way I use CSS variables is that I bind them in the editor and I can also link them between eachother - which is not currently possible in WeWeb natively. So for example I can have the following.

:root {
  --bro-primary: red;
  --bro-cta-background: var(--bro-primary); /* is red */
  --bro-icon-color: var(--bro-primary); /* is red */
}

Then in WeWeb I go and simply bind it as var(--bro-icon-color) for example, which gives me the red color as expected. For the dark mode, you can simply add something along the lines of the following. I’m not quite sure what WeWeb uses for the class, but I know there is a CSS selector for that.

:root .darkmode {
  --bro-primary: green;
}

This is very low impact thing, because it doesn’t require me to run any JavaScript and it just feels right. JavaScript as you also pointed out is very clunky, because it doesn’t reflect everywhere in the editor, as you’re jacking the internal state of WeWeb with plain JavaScript.

3 Likes
10

Adding to the conversation, what I did and it’s been working great is:

  • Request Theme with Colors using API request (optional)
  • Click current Theme
  • Set Current Theme Variable objects
  • Create a WW Formula for that takes the color value for each color and name it a human readable thing
  • Bind the color to the Formula
  • Create classes for my components (optional)
  • Bind the Formula to the color prop of every asset.

Works like a charm, has less code than what I see around the post, and allows for some good conditional coloring as well.

Hope this helps.

1 Like
11

So, you’re basically use custom vars instead.

1 Like
13

Could you share your experience more detailed?

  1. Did you create just regular vars?
  2. Did you created some kind of object for a theme?

So as I get it, you have some object containing a theme, workflow to change it and a formula that returns a color from a theme by key (css var name)?

14

Yes, it feels a little more minimalistic compared to running JS every time, while mantaining the bindability etc.

1 Like
15

Hey Antiokh,

I recorded a simple video explaining how it works. I didn’t go into a lot of depth, but hopefully this gives you an idea of the setup.

Basically, you just repeat that process for all the colors your theme will have, and bind the formula itself to the colored asset, not the wwColor variable.

This allows you to even bypass WeWeb colors, but I may not do that. I think its a good idea to have another possible value to have in case the REST request does not go through or if you don’t want unauthenticated users to use the theme selector.

You can add additional styling things, such as radius size, padding, and even assign it to classes same as the normal WeWeb colors, just with the added functionality of the conditions to the color.

I guess at some point there’s gotta be a perfomance hit for doing so many of those lookups, but I don’t notice it at my current scale.

1 Like