- 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)Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
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.
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
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.
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
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);Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
