dynamic theme?

[past oyster]

Hello,
I have a requirement to allow clients to choose one of the available color themes (red, green, blue, etc)

It will be saved as preference in database and I would like to load and use it on runtime.

My idea to achieve that:

Create a function that returns ThemeOverride with custom colors passed as function arguments.

Better way or suggestion? (looking for mantine way for that)

[slow hearth]

Theme is a regular object, you can store it anyway you want

[little trellis]

store the theme object as state, pass the state value to the mantine provider, whenever you change the theme, use the setState to update the theme object

[past oyster]

Okay so:

• function getTheme(colorsArray) that returns theme object with those colors,
• get that theme object and create a state with useState
• pass that state to theme provider.
• now theme object is reactive, and can be dynamically change.

Is that correct?

[little trellis]

yes, you can use any fetching library you prefer like axios, react query etc to grab this information from your backend, then use it to set state, it will be reactive