Open Closed

Theme customization (Angular) #8


User avatar
1
wazbek created

Hi

Is there a way to customize the Lepton theme to use our company's color scheme?

If so, how would I go about doing this?

We are using the Angular start up template.

Regards,

Warick


7 Answer(s)
  • User Avatar
    1
    vdwarapu@gmail.com created

    Can you also please share information on the ASP MVC side (non-angular)

  • User Avatar
    1
    hikalkan created
    Support Team Co-Founder

    Hi,

    Lepton theme is bootstrap compatible. Currently, the best way is to override styles by your custom CSS file.

    Example For MVC:

    Add a style file (e.g. "mystyles.css") into the wwwroot folder:

    .lp-opened-sidebar .lp-sidebar, .lp-closed .lp-sidebar {
        background-color: blue;
    }
    

    Then add this file to the global bundle (in the ConfigureServices method of your module) to add it to all the pages:

    Configure<AbpBundlingOptions>(options =>
    {
        options.StyleBundles
            .Get(LeptonThemeBundles.Styles.Global)
            .AddFiles("/mystyles.css");
    });
    

    Before the style:

    After the style:

    It is similar for the angular side.

    Inspect element with your browser's developer tools to check the class names to override.

    In the future, we will create a theme builder to change color schema easier.

  • User Avatar
    0
    wazbek created

    Hi

    I am trying to override the class in your example above. I have added it to the angular applications styles.scss file and I am able to see the style is there when viewing it in the browser. It is however not overriding the lepton theme's style.

    We have multiple angular applications and each application needs its own custom style.

    Can you please give me an example of where and how I should be overriding the lepton theme?

  • User Avatar
    0
    alper created
    Support Team Director

    can you show how you override a style? are you using !important

  • User Avatar
    0
    wazbek created

    Hi alper

    Completely forgot about the !important.

    I am able to override now.

    Thank you.

  • User Avatar
    0
    Mehmet created

    Hi @wazbek

    You can override the lepton styles by adding your custom styles to styles.scss.

    Here is an example:

    Add below content to styles.scss:

    .navbar.navbar-expand-lg.user-nav-mobile {
      background-color: cornsilk;
    }
    
    .lp-opened-sidebar .lp-sidebar,
    .lp-closed .lp-sidebar {
      background-color: darkslategrey;
    }
    

    Final UI will look like below:

    If the colors is not changed in your app, you can add the !important suffix like below:

    .navbar.navbar-expand-lg.user-nav-mobile {
      background-color: cornsilk !important;
    }
    
    .lp-opened-sidebar .lp-sidebar,
    .lp-closed .lp-sidebar {
      background-color: darkslategrey !important;
    }
    

    You can avoid the !important. Open the angular.json and find the styles array. Move bootstrap to top level of styles array and replace the path input with below:

    {
        "input": "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "lazy": false,
        "bundleName": "bootstrap.min"
    }
    ```
    
    
  • User Avatar
    0
    wazbek created

    Thank you Mehmet.

    I completely forgot about the !important.

    I am able to override what I need to now.

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11