Refused to load the stylesheet - changing style color based on different environments

Hi Shahistha,

Thank you very much for the details provided.

Since there are a few approaches that might be used to achieve the desired modifications in the styling of the Kendo UI for Angular  components, I will address them in numerical order so that it is easier for you to keep track of the response.

1. Using CSS

One possible approach that would allow achieving the desired modification in themes dynamically would be for the developer to download the desired theme(swatch) from the ThemeBuilder application:

Having done that, the developer could include the desired themes/swatches in the project using the downloaded files and change them according to the case-specific requirements. For reference, I am attaching to this response an Angular project that demonstrates this approach. To run the app:

1. Download and unzip the folder.
2. Execute npm install.
3. Run ng serve.

2. Using SCSS

An alternative approach that would allow the developer to achieve the desired functionality would be for the developer to scope the theme styles in classes similar to the following StackBlitz demo:

https://stackblitz.com/edit/angular-scss-demo-fh6yev

To achieve the modification in this case, the developer would need to apply the following modifications:

$_imported: (); // reset the list of imported modules by the new modules system making them globally available
$_kendo-imported-modules: (); // reset the list of loaded modules for good measure
$_kendo-data-uris: (); // reset the data-uris thus making them globally available

$_imported: (); // reset the list of imported modules by the new modules system making them globally available
$_kendo-imported-modules: (); // reset the list of loaded modules for good measure
$_kendo-data-uris: (); // reset the data-uris thus making them globally available

.bootstrap-theme {
    @import "@progress/kendo-theme-bootstrap/dist/all.scss";
}

$_imported: ();
$_kendo-imported-modules: ();
$_kendo-data-uris: ();
  
.fluent-theme {
    @import "@progress/kendo-theme-fluent/scss/all.scss";
}

Having scoped the styling in custom classes, the developer could use them in order apply the desired modification. For your convenience, I am attaching to this response an Angular project demonstrating the approach for scoping the themes in classes.

3. Dynamic Theme Changing

The third approach that I would suggest would rely on the suggestions in the following article in Medium:

https://baskaranajiharan1243.medium.com/implement-dynamic-theme-in-angular-plain-english-767b90e00c61

Attached, I am sending you an Angular project that implements it in the context of the Kendo UI for Angular library.

I hope the provided information helps. Please, let me know if I can further assist you with this case.