You can easily change theme colors as per your branding or selection by updating color codes. There are two different ways to do that.
app-assets folder unless and until you know what you are doing. Create your own new css/js or
scss file in assets folder for customization.
First of all, You must have SCSS knowledge and Node & Gulp installed on your system.
To customize the theme default color, styling & spacing You can change following files
scss/core/variables/_variables.scss, scss/core/variables/_components-variables.scss &
scss/core/colors/palette-variables.scss as per your preferred colors & styling. If you want to customize material layout you required to change scss/core/variables/_material-variables.scss & scss/core/colors/material-palette-variables.scss files.
It is not recommend to change any scss files inside src/scss/ folder apart from following scss/core/variables/_bootstrap-variables.scss, scss/core/variables/_components-variables.scss, scss/core/variables/_material-variables.scss, scss/core/colors/palette-variables.scss & scss/core/colors/material-palette-variables.scss scss files to avoid future update conflicts. If you still modify any other files, it may requires to merge it manually with future updates.
_bootstrap-variables.scss: file contain bootstrap variables which overrides default bootstrap variables, You can use any bootstrap variable to customize it. By using this file you can change bootstrap primary, secondary, success, danger etc... colors & lot more._material-variables.scss: file contain material bootstrap variables which overrides default material bootstrap variables, You can use any material bootstrap variable to customize it. By using this file you can change material bootstrap primary, secondary, success, danger etc... colors & lot more._components-variables.scss: file contain theme components variables, You can customize it based on your preferences.palette-variables.scss: file contain default theme's all colors variables, You can customize it based on your preferences.material-palette-variables: file contain material theme's all colors variables, You can customize it based on your preferences.
-
In order to customize the default layout You just need to change
scss/core/variables/_bootstrap-variables.scssfile if you want to change any bootstrap variables. Bootstrap colors will automatically assign toscss/core/colors/palette-variables.scss. Its not required to change in both file. -
In order to customize the material layout You just need to change
scss/core/variables/_material-variables.scssfile if you want to change any material bootstrap variables. Bootstrap colors will automatically assign toscss/core/colors/material-palette-variables.scss. Its not required to change in both file. -
Always take back-up of following files
scss/core/variables/_bootstrap-variables.scss,scss/core/variables/_components-variables.scss,scss/core/variables/_material-variables.scss,scss/core/colors/palette-variables.scss&scss/core/colors/material-palette-variables.scssif you are changing them as some times it require manual merge when we release new updates.
Final step, generale all css files using below gulp command
gulp dist-css
Please read the Gulp building tools from gulp commands.
You can use CSS method, If you are not familiar with SCSS.
-
Use
assets/css/style.cssand override those classes, ids or any other selector color you would like to change. 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 avoid future updates conflicts and code merge.