So it appears to me, if you right click on one of the dots in the right, and press F12 to open dev tools, you can then watch as the color scheme is changed, you see the 'color' attribute hex code change
<div class="app-root-emotion-cache-ltr-ov1ktg">
<div color="#2f7fbb" class="app-root-emotion-cache-ltr-1s9afiz"/>
<div class="app-root-emotion-cache-ltr-cij0n6">Bourbon</div>
</div>
So, without digging more into their code, it would appear they have somewhere in code that is automatically assigning the attributes based on either some state, or props value which is based on the current selection from the color selector dropdown.
(It is a little weird because it doesn't remind me of HTML/CSS where you'd expect either a class name to change or a style="color:#somehex;" change within the Div's definition)
|So a quick google and I found this, (a couple of the solutions show how to do it with the style tags.)
https://stackoverflow.com/questions/49709968/wants-to-change-the-color-of-div-in-react
I tend to favor having predefined CSS for each 'theme' of colors, and then use the theme name to then auto select colors based on it, I unfortunately don't have an example that is pure react based though to demonstrate locally.
But in theory you need the following:
1. A defined set of color pallet (swatches/hex/color names) for a Theme
2. Those themes, either via CSS names and Classes, or through direct style setting at run time set the current theme color for an element
3. some change handler that fires to set the new theme name, and thus choosing a different pallet to fill in the values.
Hope that helps a little?
btw, this may not be an Experience Builder example but I think the same would apply./
When I searched their source I saw this compiled (numbered) function:
9332: (t, e, r) => {
"use strict";
r.d(e, {
Actions: () => a,
useKdheDispatch: () => u,
useKdheState: () => c
});
var n = r(8891);
const {useDispatch: i, useSelector: o} = n.ReactRedux;
var a;
!function(t) {
t.UpdateFilters = "UPDATE-FILTERS",
t.UpdateActiveData = "UPDATE-ACTIVE-DATA",
t.UpdateSelected = "UPDATE-SELECTED",
t.UpdateTimeSeries = "UPDATE-TIME-SERIES",
t.UpdateColorScheme = "UPDATE-COLOR-SCHEME",
t.ClearSelection = "CLEAR-SELECTION",
t.SetKeyLoadingStatus = "SET-KEY-LOADING-STATUS"
}(a || (a = {}));
const u = () => i()
, c = () => o((t => t.ksDataState))
}
It looks like they are actually leveraging Redux under the surface. (Maybe this is actually EXB after all) And it appears to be dispatching actions for certtain keys among which is "UPDATE-COLOR-SCHEME"
(One of the problems I see with the way many of these get deployed into production, is when you build for prod the code has some elements get renamed / compiled in a way that looks different than how you'd code it in a custom widget before building, but what I described earlier, in theory could be handled this way, especially if colors are set and managed in Redux, it solves some of the state issues you might have otherwise)
