- 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)
-
0
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.
-
0
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.
-
0
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://support.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
