Open Closed

Blazor, Lepton Theme, Branding: How to globally change colors? #983


User avatar
0
BassaSolutions created
  • ABP Framework version: 4.2.0
  • UI type: Blazor
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes

In the documentation, there is no information on how to use all our company brand colors with ABP commercial Lapton Theme. https://docs.abp.io/en/abp/latest/UI/Blazor/Branding

What we did:

/* Your Global Styles */
.btn.btn-primary {
  color: #fff;
  background-color: #1fb787;
  border-color: #12b581;
}

.lp-opened-sidebar .lp-sidebar, .lp-closed .lp-sidebar {
    background: #1fb787;
	background: linear-gradient(7deg, #1fb787, #78c6be);
}

:root {
    --primary: #1fb787;
    --secondary: #78c6be;
    --sidebar-bg: #1fb787;
}

header {
    background: #78c6be;
}

Now there are still many small things missing, like focused inputfield color or cancel btn colors,..

Is there somewhere a documentation what needs to be done to change all colors?

Thank you!


3 Answer(s)
  • User Avatar
    0
    armagan created
    Support Team UI/UX Lead Designer

    Hi BassaSolutions. We just made use of bootstrap classes while making our theme and we did not use extra classes. So you can make all colors special by simply overriding the bootstrap styles.

  • User Avatar
    0
    BassaSolutions created

    Ok, so there is nothing like a 'color changer' to simply adopt your lepton theme? This would be a helpful feature. I would assume that most of the customers want to use their own company colors, instead of the generic ABP ones.

  • User Avatar
    0
    Jeroenmin created

    Ok, so there is nothing like a 'color changer' to simply adopt your lepton theme? This would be a helpful feature. I would assume that most of the customers want to use their own company colors, instead of the generic ABP ones.

    Disclaimer: I am using the angular UI, i assume the Blazor should work the same for this.

    I found that change the :root variables in styles.scss did the trick.

    These are the possibilities (taken from lepton-5 theme):

    :root {
        --logo: url(/assets/images/logo/logo-dark.png)!important;
        --logo-reverse: url(/assets/images/logo/logo-dark.png)!important;
        --sidebar-bg: #ffffff;
        --brand: #feba57;
        --primary: [#113059](https://abp.io/QA/Questions/113059);
        --secondary: #8191A6;
        --success: #d29b5d;
        --info: #FEBA57;
        --warning: #ee6f42;
        --danger: #d12941;
        --light: #E9EDF2;
        --dark: initial;
        --global-text: #000000;
        --global-bg: #ffffff;
        --text-color: #081449;
        --background: #eae3d9;
        --sidebar-bg: #ffffff;
        --sidebar-text: #000000;
        --border-color: rgba(8, 20, 73, 0.1);
        --shadow: 2px 2px 2px rgba(0, 0, 0, 0.05);
        --shadow-big: 2px 2px 12px rgba(0, 0, 0, 0.05);
        --shadow-smooth: 1px 1px 1px rgba(0, 0, 0, 0.05)
    }
    
    

    Hope this helps. Jeroen

Made with ❤️ on ABP v9.1.0-preview. Updated on December 05, 2024, 12:19