Change colors of bootstrap theme

[derchirurg]

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

question

What is the current behavior?

With the last used release (1.0.28) I could do something like this:

Survey.cssType = "bootstrap";
defaultBootstrapCss.navigationButton = "btn btn-primary";

const defaultThemeColors = StylesManager.ThemeColors["default"];
defaultThemeColors["$main-color"] = "#054295";
defaultThemeColors["$main-hover-color"] = "#D62020";
defaultThemeColors["$text-color"] = "#000000";
defaultThemeColors["$header-color"] = "white";
defaultThemeColors["$header-background-color"] = "#054295";
StylesManager.applyTheme("default");

This is not possible anymore (in 1.0.35), because of the change in the StyleManager API.

How can I change the theme colors of bootstrap theme?

What is the expected behavior?

I want to change the colors of bootstrap theme.

Specify your

• browser:
• browser version:
• surveyjs platform (angular or react or jquery or knockout or vue): angular
• surveyjs version: 1.0.35

[dmitry-kurmanov]

@derchirurg hello! Please try to change the code

Survey.cssType = "bootstrap"; 

to

Survey.StylesManager.applyTheme("bootstrap");

[derchirurg]

@dmitrykurmanov thanks, thats correct.
But how do I change the colors like:
defaultThemeColors["$main-color"] = "#054295";

[dmitry-kurmanov]

@derchirurg I understand your scenario for now. We don't have this customization for bootstrap theme. (you don't need to load survey.css styles). Because in bootstrap we have bootstrap's way to change your colors (https://getbootstrap.com/docs/3.3/customize/). Or you can just use css to override any class.

[JaneSjs]

To customize the appearance of form elements, implement a custom theme. For more information, please refer to the following guide: Themes and Styles.