Switching Between Themes at Runtime

Question

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

TSV · Accepted Answer · 2024-03-13 12:16:14Z

0

You can load all the themes:

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

answered Mar 13, 2024 at 12:16

TSV

7,6681 gold badge33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BSB Over a year ago

The tradeoff here, which is acceptable for my use case, is that index.js is fairly large at 180kb (minified).

TSV Over a year ago

Undortunately you right :-(

Collectives™ on Stack Overflow

Switching Between Themes at Runtime

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related