Modern Theme Colors (CSS Variables) are applied to the root body component of the entire page, not scoped to the SurveyJS container

[JosephBrooksbank]

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

reporting a bug/requesting a feature

What is the current behavior?

StyleManager updates style attribute on the main body of the entire page. This is very intrusive, and can have unintended consequences on other libraries that use the same css variable names.

What is the expected behavior?

Styles would be applied through the sv-root (or similar) div rather than the body of the whole page

How would you reproduce the current behavior (if this is a bug)?

https://codesandbox.io/s/surveyjs-intrusive-styling-lsq8q8 you can see a demo of this issue here. The text at the top of the app (outside of the surveyJS container) is being styled by surveyJS unintentionally.

If you really must apply them to the body of the page, I would ask that you use unique variable names then, rather than generics like text-color and error-color

Specify your

• browser: N\A
• browser version: N\A
• surveyjs platform (angular or react or jquery or knockout or vue): react
• surveyjs version: 1.9.75

[JaneSjs]

Hello @JosephBrooksbank,
Thank you for reporting this issue. We will research it and let you know our results.
For the record: the issue is reproduced with the Modern theme. With defaultV2, the custom text uses the specified (green) color (example).

[tsv2013]

We apply variables to the body because they should be applied to popups which are added to the body. Unfortunately right now, we'd prefer don't rename CSS variables because it would be a breaking change for our users. Most likely we'll rename our variables after we'll implement theme editor and release a major update (v2.x.x) with these breaking changes.

I leave this issue open in our backlog and we'll return to it later.

[tsv2013]

Right now we're working active on the Theme Builder feature of the Survey Creator V2. You can check the progress in the following issues:
surveyjs/survey-creator#2905
surveyjs/survey-creator#4259
#6252
and some others.

This feature will assist user to modify survey look and feel according his needs. 10 new themes will be introduced. End-users will be able to customize colors, paddings, font styles, panels transparency and other settings. Working on this feature we've solved this issue - moved CSS variables from body to survey root element.

In the nearest future (somewhere in a half-year) we're going to release version 2 of our products. In this major update we're going to deprecate all legacy themes: default (and modifications) and modern.

We invite you to test our new feature. Your feedback.is highly appreciated.