Question T21365
Visible to All Users

Changing css variable for primary color not working

created 2 months ago

Hello,

When I change the primary color of the creator theme, nothing seems to happen but when I change the individual elements (commented out lines) it works well.

Code
creator.applyCreatorTheme({
  ...themes.DefaultLight,
  cssVariables: {
    ...themes.DefaultLight.cssVariables,
    //   "--ctr-toolbox-item-icon-color": color,
    //   "--ctr-button-text-color": color,
    //   "--sjs-special-background": color + "04",
    //   "--ctr-list-item-icon-color": color,
    //   "--ctr-menu-item-border-color-selected": color,
    //   "--ctr-page-banner-background-color": color + "a5",
    "--sjs-primary-backcolor": color,
    "--primary": color,
  },
});
Comments (3)
Jane 2 months ago

    Hello,
    A new creator theme doesn't include a primary variable. You can review a list of theme variables at predefined-themes/default/light.css.

    Please elaborate on your goal so that I can assist you further.

    Thanks

    R R
    RNM 2 months ago

      Hello Jane,
      My goal is to replace the green color globally across the creator without having to override each of the individual color classes. Inspecting the elements led me to the primary css classes i mentioned.

      Clipboard-File-1.png

      Is there a way to do override the color?

      Jane 2 months ago

        Hello,
        Thank you for the clarification.

        Please try to update the following CSS variables:

        JavaScript
        const color = "rgba(255, 182, 193, 1)";
const colorLight = "rgba(255, 220, 230, 0.3)";
creator.applyCreatorTheme({
    ...SurveyCreatorTheme.DefaultLight,
    cssVariables: {
      ...SurveyCreatorTheme.DefaultLight.cssVariables,
         "--sjs-primary-background-500": color, 
        "--sjs-primary-background-400": color,
        "--sjs-secondary-background-500": color,
        "--sjs-semantic-green-background-500": color,
        "--sjs-secondary-background-25": color,
        "--sjs-special-background": colorLight
    },
});

        Clipboard-File-1.png

        Let me know if it works for you.

        Sign in to comment on this post

        Answers approved by surveyjs Support

        created 2 months ago (modified 2 months ago)

        [Update]

        Meanwhile, take note that can easily customize a SurveyJS Creator and its theme using the Creator Settings panel. This panel can be enabled by the following option:

        JavaScript
        const options = {
  showCreatorThemeSettings: true
};
const creator = new SurveyCreator.SurveyCreator(options);

        Clipboard-File-1.png

        Simply modify the Primary and Secondary Accent Colors, Update the Surface Background color and get a modified survey creator theme JSON using the creator.creatorTheme property. To apply a customized creator theme, pass a theme JSON object to the creator.applyCreatorTheme(themeJSON) function.

        Should you have any further questions, please let us know.

        Note: Please be aware that the current API may be changed with the official v2.0 release.

          Sign in to comment on this post