Aperto Chiuso

Changing LeptonX colors #3713


User avatar
0
ageiter creato
  • 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 risposte
  • User Avatar
    0
    muhammedaltug creato

    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 creato

    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 creato

    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 marzo 25, 2024, 15:11