Hi, I was wondering if you could help, we are in the process of integrating SurveyJS into one of our products which has a dark/light mode switcher on the header. When they change to dark mode everything updates reactively, but surveyJS doesn't by default. How can I update the theme dynamically?
The following code works fine on page load
Code//this bit works fine
const formDefinition = { ... };
const survey = new Survey.Model(formDefinition);
const globalTheme = 'light'; //this comes from some logic in our page header, light|dark
const getSurveyJSTheme = function (ourTheme) {
let theme = {};
if (ourTheme == 'dark') {
theme = SurveyTheme.DefaultDark;
}
return theme;
}
const surveyJSTheme = getSurveyJSTheme(globalTheme);
survey.applyTheme(surveyJSTheme);
$("#form-viewer").Survey({ model: survey });
My question is how do I update it when it changes dynamically?
Code//this function is triggered by changing the theme in our global header
function onChangeGlobalHeader(newTheme){
const newSurveyJSTheme = getSurveyJSTheme(newTheme);
// ---- WHAT NEEDS TO GO HERE? -----
}
Thanks for your help
Gavin