Angular

Version: 10.0.0

Enable Unifi Styled Themes

There are two options to bring the Unifi theme styling into your project.

During use of the ng add schematic, you will be prompted to choose a theme; or
Manually add the necessary Unifi packages and font and define your theme

With both options, you will be able to further customize the theming of your application and make use of the Unifi Web Sass framework to style components. If you have not yet done either of these options, visit the Get Started page.

Customizing Your Theme

Unifi Angular extends its styles from Unifi Web, which means all features documented for Unifi Web theming and styling are available to Unifi Angular, including the Sass variables for theme overrides. These are documented on the corresponding Unifi Angular and Unifi Web components.

Overriding these variables is as simple as configuring the module. For example, changing the primary and secondary theme colors can be done by updating _theme-tokens.scss to the following:

@forward "@nelnet/unifi-components-angular/src/lib/scss/theming/unifi-theme-tokens" with (
    $u-theme-primary: #a30080,
    $u-theme-secondary: #006b54 
);

@forward "@nelnet/unifi-components-angular/src/lib/scss/theming/unifi-theme-tokens" with (
    $u-theme-primary: #a30080,
    $u-theme-secondary: #006b54 
);

Likewise, component level variables can be customized by updating _theme-variables.scss. For more information on Tokens vs. Variables please review Unifi Web theming.