Overview

There are multiple ways to customize CoreUI for Angular. Your best path can depend on your project, the complexity ofyour build tools, the version of CoreUI for Angular you're using, browser support, and more.

Our two preferred methods are:

1. You can extend our source files.
2. You can override CoreUI styles.

File structure

Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster andcustomize your project.

Whenever possible, avoid modifying CoreUI core files. For Sass, that means creating your own stylesheet that importsCoreUI for Bootstrap so you can modify and extend it. Assuming you're using a package manager like npm, you'll have afile structure that looks like this:

Variable defaults

Every Sass variable in CoreUI for Angular includes the!default flag allowing you to override the variable's defaultvalue in your own Sass without modifying CoreUI source code. Copy and paste variables as needed, modify their values,and remove the!default flag. If a variable has already been assigned, then it won't be re-assigned by the defaultvalues in CoreUI.

You will find the complete list of CoreUI variables innode_modules/@coreui/coreui/scss/_variables.scss. Somevariables are set tonull, these variables don't output the property unless they are overridden in yourconfiguration.

Here's an example that changes thebackground-color andcolor for thebody when importing and compiling CoreUI for Angular via npm:

Custom styles and overrides

In yourcustom.scss, you can put custom code for CoreUI components or your own styles.