Open Closed

Changing LeptonX colors #3713


User avatar
0
ageiter created
  • ABP Framework version: v6.0.0-rc.4
  • UI type: Blazor
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no

I would like to change the colors of the LeptonX theme ('Light' style).

I wanted to override it in blazor-global-styles.css with my colors. But for the pink color (e.g. grid pagination) this doesn't work.

I then saw that the color code #f72585 (pink) occurs in the file bootstrap-light.css in very many places and is not set globally. So of course it is very hard to replace the color everywhere.

Can you make it so that we can just overwrite it? Something like with the variable --lpx-brand.

Or what is the easiest way to do this?


3 Answer(s)
  • User Avatar
    0
    muhammedaltug created

    Hello,

    Sorry for the late response

    There is no way to override bootstrap colors with CSS variables right now. But this is in our roadmap.

  • User Avatar
    0
    ageiter created

    Hello,

    Sorry for the late response

    There is no way to override bootstrap colors with CSS variables right now. But this is in our roadmap.

    Is there any way that I could replace the whole file? Then I can replace all colors in there with search + replace. If so, where can I find the source file?

  • User Avatar
    0
    muhammedaltug created

    Hello,

    You can download the LeptonX source code with abp get-source Volo.Abp.LeptonXTheme.Pro --preview in 6.0.0-rc.5 version. You can replace existing style files by copy to the same path in your project.

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