Question T10604
Visible to All Users

Change the default V2 theme colors

created 2 years ago

Hi team
we would like to customize the survey based on our requirements
we are unable to change the default theme colors for (defaultV2)
what we tried

var defaultThemeColors = StylesManager.ThemeColors["default"];
defaultThemeColors["$main-color"] = "#d3d3d3";
defaultThemeColors["$main-hover-color"] = "#6fe06f";
defaultThemeColors["$text-color"] = "#4a4a4a";
defaultThemeColors["$header-color"] = "#7ff07f";
defaultThemeColors["$header-background-color"] = "#4a4a4a";
defaultThemeColors["$body-container-background-color"] = "#f8f8f8";
StylesManager.applyTheme("default");

This example is not working as expected , we are unable to change the theme colors
we are importing from "survey-js-core"

import { StylesManager,Model} from "survey-core";
import { Survey } from "survey-react-ui"

we would also like to add few buttons in a specific order , where we can control how to display the order of the buttons
we want to display a button before the previous button

we would like to add few buttons which can be automatically adjusted based on the screen size

Answers

created 2 years ago (modified 2 years ago)

Hello,
The StylesManager.ThemeColors collection contains colors for various themes: default, modern, etc. See a full list at Theme Colors.
However, it doesn't contain colors for the defaultV2 theme. To customize theme colors for the defaultV2 theme, you can use theme variables, as demonstrated by the following demo: Theme Customization. A full list of variables is available at https://github.com/surveyjs/survey-library/blob/master/src/defaultV2-theme/variables.scss.

Please let me know if this helps.

To process your second question in the best way, I've extracted it to a separate thread: Add button beside previous and next in a specific order that adjusts automatically based on mobile resolutions.

    Show previous comments (1)

      Hello Ravikiran,
      I would suggest that you review the following CodeSandbox sample which demonstrates how to customize the theme for a Survey in a React App: https://codesandbox.io/s/eloquent-morning-9vyqkf.
      The index.css file, where the style is defined, is loaded in the SurveyComponent import section.

      Please let me know if this helps.

        Hi Jane
        we were able to change the theme
        The issue in our case was the following
        In our index.html(inside public folder) file inside of the body tag we have div with id ="root"
        so we were supposed to apply those styles for #root and not #surveyElement
        once we did that , we were able to get it working

        Thanks
        Ravikiran

          Thank you for the update, Ravikiran. I'm happy to hear that you solved the issue.

          Please feel free to contact us if you have any questions.