- ABP Framework version: v7.1.1
- UI type: Angular
- DB provider: EF Core
- Tiered (MVC) or Identity Server Separated (Angular): yes
- Exception message and stack trace:
- Steps to reproduce the issue:" We are using Angular with LeptonX. We are adding few new custom components to our project and we need to add some additional css (project-dark.css, project-light.css, project-dim.css) on top of LeptonX. See Below. When theme changes from System to light or light or dark etc., we would like to load project related additional css style settings ALONG WITH the LeptonX style settings. Please help us how we can accomplish it. it would be really helpful if you can explain step by step.
In essence, we will be having additional 3 items the angular.json. { "input": "assets/project/css/project-dark.css", "inject": false, "bundleName": "project-dark" }, { "input": "assets/project/css/project-light.css", "inject": false, "bundleName": "project-light" }, { "input": "assets/project/css/project-dim.css", "inject": false, "bundleName": "project-dim" },
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/dark.css",
"inject": false,
"bundleName": "dark"
},
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/light.css",
"inject": false,
"bundleName": "light"
},
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/dim.css",
"inject": false,
"bundleName": "dim"
},
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dim.css",
"inject": false,
"bundleName": "bootstrap-dim"
},
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dark.css",
"inject": false,
"bundleName": "bootstrap-dark"
},
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-light.css",
"inject": false,
"bundleName": "bootstrap-light"
},
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/ng-bundle.css",
"inject": false,
"bundleName": "ng-bundle"
},
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.css",
"inject": false,
"bundleName": "layout-bundle"
},
{
"input": "node_modules/@volosoft/abp.ng.theme.lepton-x/assets/css/abp-bundle.css",
"inject": false,
"bundleName": "abp-bundle"
},
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/dark.rtl.css",
"inject": false,
"bundleName": "dark.rtl"
},
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/light.rtl.css",
"inject": false,
"bundleName": "light.rtl"
},
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/dim.rtl.css",
"inject": false,
"bundleName": "dim.rtl"
},
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dim.rtl.css",
"inject": false,
"bundleName": "bootstrap-dim.rtl"
},
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dark.rtl.css",
"inject": false,
"bundleName": "bootstrap-dark.rtl"
},
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-light.rtl.css",
"inject": false,
"bundleName": "bootstrap-light.rtl"
},
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/ng-bundle.rtl.css",
"inject": false,
"bundleName": "ng-bundle.rtl"
},
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.rtl.css",
"inject": false,
"bundleName": "layout-bundle.rtl"
},
{
"input": "node_modules/@volosoft/abp.ng.theme.lepton-x/assets/css/abp-bundle.rtl.css",
"inject": false,
"bundleName": "abp-bundle.rtl"
},
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/font-bundle.css",
"inject": false,
"bundleName": "font-bundle"
},
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/font-bundle.rtl.css",
"inject": false,
"bundleName": "font-bundle.rtl"
},
Hope to hear back from you soon.
7 Answer(s)
-
0
Hi. Lepton X has
ThemeService. The service hasselectedStyle$(observable) . You can track the theme changes and value of theme. Then you can inject your style. (and remove your old. we manage styles withStyleServiceservice) -
0
Thank you mahmut for quick response. Can you please provide code snippet onwhere we need to inject and how to inject. Appreciate all your help on this.
-
0
Any help would be appreciated. Point us to right documentation or code snippet.
-
0
Respond would be appreciated.
-
0
I am also interested in this. I had to do it manually by changing LeptonX source code but didn't know there was an implementation to do it in code.
-
0
@rafael..Ideally framework should have that option. Its basic requirement of any framework. Unfortunate abp seems like didn't think about it. Seems like we need to take long path. how did you manage to change the LeptonX source code. We downloaded LeptonX source code but we are unable to do anything with it. Any insight would be appreciated.
-
0
@rafael..Ideally framework should have that option. Its basic requirement of any framework. Unfortunate abp seems like didn't think about it. Seems like we need to take long path. how did you manage to change the LeptonX source code. We downloaded LeptonX source code but we are unable to do anything with it. Any insight would be appreciated.
I apologize for the wait. In Turkey, we celebrate a long religious holiday (10 days). But adding style is not ABP-specific feature. Here the code from our codebase.
const linkElem = document.createElement('link'); linkElem.rel = 'stylesheet'; linkElem.id = style.bundleName; linkElem.href = `${style.bundleName}.css`; document.head.appendChild(linkElem);
