How can I have full Stylesheets for different areas of the page?

[Mark Rabjohn]

Hi,

I'm trying to create a standard stylesheet to work with Bootstrap5, the aim is for the look and feel to be similar to SAP UI 5 because we're embedding apps into the SAP business one web client (but would prefer not to use SAPUI5 itself). The layout in this scheme has two separate colour schemes in play at the same time, a filters area, and the page body. The aim is that an alternative theme can be selected by wrapping the controls in a div with a special class e.g. .filters-area

Firstly, does anybody know if this functionality exists in Syncfusion?

To try and acheive this, I downloaded the npm package @syncfusion/blazor-themes. The files in that package indicate use of included modules like 'accordion-layout' and 'accordion-theme', but the files themselves are not composed using them. Is it possible to download the modular SCSS source files to use in my own project?

Up to now I have tried embedding the whole bootstrap5 file and bootstrap5-dark files in my custom theme, but this does not seem to be the best approach - it's not working :(

Thanks

[Mark Rabjohn]

I got this working (kind of), but it's not as simple as I think it ought to be. What I did was as follows:

1) Take a copy of the bootstrap5.all.scss skin - called bootstrap5-custom-base.scss

2) Take another copy as 'bootstrap5-theme-shared.scss', but this time remove all of the '!default' on all variables and remove any export-module that ends in '-layer' or '-icons'.

3) Make a file to bring the two themes together site.scss - in this file, import 'bootstrap5-custom-base', then copy in all of the core variables from 'bootstrap5-custom-base' and remove '!default' on those, then you can add you selector class and import 'bootstrap5-theme-shared.scss'

Mark

[BharatRam Harikrishnan]

Hi Mark,

We could not get your requirement clearly. Can you please share more details or sample application to guide you on this further.

1) Take a copy of the bootstrap5.all.scss skin - called bootstrap5-custom-base.scss	Can you please confirm which file in npm package you are referring?
2) Take another copy as 'bootstrap5-theme-shared.scss', but this time remove all of the '!default' on all variables and remove any export-module that ends in '-layer' or '-icons'.	What the difference between all.scss and shared.scss files?   Why did you removed !default and export modules?
3) Make a file to bring the two themes together site.scss - in this file, import 'bootstrap5-custom-base', then copy in all of the core variables from 'bootstrap5-custom-base' and remove '!default' on those, then you can add you selector class and import 'bootstrap5-theme-shared.scss'

Find details regarding structure of SCSS files in npm packages.  Below scss files in packages contains styles for all syncfusion blazor components.

If you do not want to use complete style and need only component specific styles, you can use the one’s inside folders.

The import statements point to the style in base folder.

Regards,

Bharat Ram H