- What is your product version? - Latest
- What is your product type (Angular or MVC)? - Angular
- What is product framework type (.net framework or .net core)? - .Net5
I am using kendo grid in my project. I have added custom styles such as colours into styles.css file and it is working fine, so no matter what theme I select the colour will remain as I defined them in styles.css. I want to use different colours for my grid based on the selection of theme. For example, if user selects default theme then I want to set colours of the grid to blue, if they select themeX then I want to change the colours of the grid to green. I don't want to create new theme, just customising the colour of the grid based on theme.
The current file 'styles.css' is global so colours defined here are applicable to every theme. Can you please proivde step by step instructions for doing the above?
Thanks
1 Answer(s)
-
0
Hi,
First, you need to create different style files for each theme. You can put those style files under
angular/src/assets/metronic/themes/theme-name/css/custom-style.css. For example, for theme1, it will be angular/src/assets/metronic/themes/theme1/css/custom-style.css.Then, you need to add your style path to https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/src/shared/helpers/DynamicResourcesHelper.ts#L29, so your style will be loaded dynamically for the selected theme.
The line you need to add should be like below;
AppConsts.appBaseUrl + '/assets/metronic/themes/' + theme + '/css/custom-style.css',
