Chameleon Admin - Modern Bootstrap 4 WebApp & Dashboard HTML Template + UI Kit provides 14 different types of built in colors to use. You can use those color directly for font color, background & border by using their color classes. For usage and classes details please refer documentation UI > Color Palette > Colors.
You can also change theme colors as per your branding or selection by updating color codes. There are two different ways to do that.
app-assetsfolder files unless and until you know what you are doing. Create your own new css or scss file in
assetsfolder for customization.
- Method 1 : This is very easy and simple way, First backup
app-assets/cssfolder which contain default theme of Chameleon admin and find and replace the color code which you want to change.
- Method 2 : Use
assets/css/style.cssand override those classes, ids or any other selector color you would like to. You can also create your own custom css file for this and manually include it on your html page. This is the best way to avoide future updates conflicts and code merge.
Chameleon admin template provides all SCSS variables files in
assets/scss/ folder. For bootstrap variables use
variables.scss file and for chameleon admin template variables use
app-variables.scss. You can also customize your own color palette by using
palette-variables.scssis override bootstrap brand colors also, so do not forget to set bootstrap brand colors in both file
assetsfolder. Color pallete variable file base color of color palette will the be same as bootstrap brand color.
For this you need to have Node and Gulp installed on your system. And then you need to generate css files using gulp command ‘gulp dist-css’.
Please read the documentation for the more details.