Open Closed

How to add Additional CSS for Themes (Light, dark, system...) in addition to Leptonx / Angular #5292


User avatar
0
mmukkara created
  • 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)
  • User Avatar
    0
    mahmut.gundogdu created

    Hi. Lepton X has ThemeService . The service has selectedStyle$ (observable) . You can track the theme changes and value of theme. Then you can inject your style. (and remove your old. we manage styles with StyleService service)

  • User Avatar
    0
    mmukkara created

    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.

  • User Avatar
    0
    mmukkara created

    Any help would be appreciated. Point us to right documentation or code snippet.

  • User Avatar
    0
    mmukkara created

    Respond would be appreciated.

  • User Avatar
    0
    rafael.gonzales created

    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.

  • User Avatar
    0
    mmukkara created

    @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.

  • User Avatar
    0
    mahmut.gundogdu created

    @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);
    
Made with ❤️ on ABP v9.1.0-preview. Updated on December 05, 2024, 12:19