- 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.
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
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.
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
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://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
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
