Open Closed

Theme customization #8


0
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


2 Answer(s)
  • 0
    [email protected] created

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

  • 1
    hikalkan created

    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:

    image.png

    After the style:

    image.png

    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.