Theme customization and render in react

[remigarcia]

Are you requesting a feature, reporting a bug or asking a question?

I have a question about theme customization in react

What is the current behavior?

When I dynamically change a color in the "modern" theme, the Survey component is not rerendered with that changed color.

What is the expected behavior?

When I dynamically change a color in the "modern" theme, the Survey component should be rerendered with that changed color.

Provide the test code and the tested page URL (if applicable)

Here I render the Survey with a custom red $main-color, and on a click on a button, I want my survey rerendered with the $main-color in green. The following code shows the survey with the red color, but on the click, the color doesn't change.

How to force the rerender of the theme with the new theme colors ?

Test code

import React, {useState} from 'react';
import * as Survey from "survey-react";
import * as widgets from "surveyjs-widgets";
import "survey-react/survey.css";
import "jquery-ui/themes/base/all.css";
import "nouislider/distribute/nouislider.css";
import "select2/dist/css/select2.css";
import "bootstrap-slider/dist/css/bootstrap-slider.css";
import "jquery-bar-rating/dist/themes/css-stars.css";
import $ from "jquery";
import "jquery-ui/ui/widgets/datepicker.js";
import "select2/dist/js/select2.js";
import "jquery-bar-rating";
import "pretty-checkbox/dist/pretty-checkbox.css";

widgets.prettycheckbox(Survey);
widgets.select2(Survey, $);
widgets.inputmask(Survey);
widgets.jquerybarrating(Survey, $);
widgets.jqueryuidatepicker(Survey, $);
widgets.nouislider(Survey);
widgets.select2tagbox(Survey, $);
widgets.sortablejs(Survey);
widgets.ckeditor(Survey);
widgets.autocomplete(Survey, $);
widgets.bootstrapslider(Survey);

const CustomizedSurvey = ({form, colors}) => {
    Object.keys(colors).forEach(color => Survey.StylesManager.ThemeColors['modern'][color] = colors[color]);
    Survey.StylesManager.applyTheme('modern');

    return <Survey.Survey json={form} />;
}

const RenderForm = (form, colors) => {
        return <CustomizedSurvey form={form} colors={colors} /> ;
}

const ColorChanger = (form) => {
    const [colors, setColors] = useState({"$main-color": "ff0000"});

    return <>
        <RenderForm form={form} colors={colors} />
        <button onClick={() => setColors({"$main-color": "00ff00"})} value="change color" />
    </>
}

Specify your

• browser: Chrome
• browser version: 91
• surveyjs platform (angular or react or jquery or knockout or vue): react
• surveyjs version: 1.8.49

[tsv2013]

SurveyJS modern theme does not support colors customization. You can change colors this way for the default theme only.

[remigarcia]

This is working :

Survey.StylesManager.ThemeColors['modern']['$main-color'] = '#ff0000';

I can override this way the modern theme colors. My problem is that they show only at the first render, if I change the colors afterward and rerender the Survey, the color stay at its first value.