Search code examples
surveyjs

Switching Between Themes at Runtime

The documentation says that you can use multiple themes by just including the Javascript files of the theme and the calling survey.applyTheme():

<!-- In classic script applications: -->
<head>
    <!-- ... -->
    <link href="https://unpkg.com/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/survey-core/themes/contrast-dark.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/survey-core/themes/contrast-light.min.js"></script>
    <!-- ... -->
</head>
<script>
const surveyJson = { ... };
const survey = new Survey.Model(surveyJson);
survey.applyTheme(SurveyTheme.ContrastLight);
</script>

The problem is that each Javascript theme file overrides the SurveyTheme object. So in this case, ContrastLight would be available but ContrastDark wouldn't.

  • I check the SurveyTheme object in the browse console and it only had one theme
  • I tried changing the order of the JS files to prove that only could be available at a time
Solution

  • You can load all the themes:

    <script type="text/javascript" src="https://unpkg.com/survey-core/themes/index.js"></script>