Theming
Ignite UI for Angular allows you to modify the styles of all component themes using CSS variables. If you really wanted to dig deep, we provide a powerful Sass theming engine that allows you to create global component themes tailored to your specific design language that work in all modern browsers.
Note
This document describes the theming system in Ignite UI for Angular from version 12 forward. Starting with version 12 CSS variables are the recommended way to modify the global and component themes. You can still use the Sass theming library as you would've prior to version 12.
Basic Usage
Ignite UI for Angular includes the following themes as part of its package: - Material - Bootstrap - Fluent - Indigo
All themes have light and dark variants as well as support for left-to-right(LTR) and right-to-left(RTL) content by default. The easiest way to start using any of the bundled themes in your application is by specifying the path to a CSS theme file in your angular.json
configuration. For example, if you wanted to use the dark Material theme, you would include the path to the theme file like so:
"styles": [
"node_modules/igniteui-angular/styles/igniteui-angular-dark.css",
"src/styles.css"
]
Note
If you've installed the Ignite UI for Angular package using ng add igniteui-angular
, you will have noticed that we've already added igniteui-angular.css
to the styles array.
Here's the full list of themes included in the styles folder:
Theme Name | Path |
---|---|
Material Light | node_modules/igniteui-angular/styles/igniteui-angular.css |
Material Dark | node_modules/igniteui-angular/styles/igniteui-angular-dark.css |
Bootstrap Light | node_modules/igniteui-angular/styles/igniteui-bootstrap-light.css |
Bootstrap Dark | node_modules/igniteui-angular/styles/igniteui-bootstrap-dark.css |
Material Dark Green | node_modules/igniteui-angular/styles/igniteui-dark-green.css |
Fluent Light | node_modules/igniteui-angular/styles/igniteui-fluent-light.css |
Fluent Dark | node_modules/igniteui-angular/styles/igniteui-fluent-dark.css |
Fluent Light Excel | node_modules/igniteui-angular/styles/igniteui-fluent-light-excel.css |
Fluent Dark Excel | node_modules/igniteui-angular/styles/igniteui-fluent-dark-excel.css |
Fluent Light Word | node_modules/igniteui-angular/styles/igniteui-fluent-light-word.css |
Fluent Dark Word | node_modules/igniteui-angular/styles/igniteui-fluent-dark-word.css |
Indigo Light | node_modules/igniteui-angular/styles/igniteui-indigo-light.css |
Indigo Dark | node_modules/igniteui-angular/styles/igniteui-indigo-dark.css |
As you can see, we ship Ignite UI for Angular with a substantial amount of themes.
This is not the end of our theming story, though. All themes are compiled from Sass source and are built using our powerful theming engine. This engine contains Sass mixins
and functions
many of which are publicly exposed, which allows you to completely redesign all components in your application.
If Sass isn't your thing that's completely fine, we've made it easy to modify the compiled themes using custom CSS properties, or otherwise known as CSS variables. You can still use Sass in combination with CSS variables.
Global Variables
If you inspect any of the CSS themes above, you will notice that there are quite a few CSS variables included in the :root
scope; We include variables for colors
, shadows
, typography
, and configuration
. Modifying any of these variables will allow you to customize the overall look and feel of the theme and conversely the components.
What most people look for when modifying a theme is changing the default colors used by the components.
If you wanted to change the primary and secondary colors, all you have to do is type the following in your styles.css
file:
/* styles.css */
:root {
--ig-primary-h: 105deg;
--ig-primary-s: 29%;
--ig-primary-l: 56%;
--ig-secondary-h: 259deg;
--ig-secondary-s: 63%;
--ig-secondary-l: 24%;
}
Let's break down the names of these color variables. The ig
prefix is there as a unique identifier to indicate that this variable is part of an Ignite UI for Angular theme, primary
is the name of the color
palette, and h
, s
, and l
stand for hue, saturation, and lightness. We will take a deeper look at palettes in the Palettes section of the documentation. For now all you need to know is that we have several base colors (primary, secondary, success, info, etc.) that include different shades or variants that are all generated from the hue, saturation, and lightness CSS variables, The 500
color variants are considered the main representation values for hue, saturation, and lightness. For instance, the primary 500 color variant is declared as --ig-primary-500: hsla(var(--ig-primary-h), var(--ig-primary-s), var(--ig-primary-l), var(--ig-primary-a))
.
Following this approach, you can completely overhaul the entire palette.
Warning
Some components do not use colors from the palettes. In those instances, you will have to target the component CSS variables directly to modify their colors. To find out which palette colors are used by what component, take a look at the Components Documentation.
Likewise, changing the elevations
(shadows) is just as easy. We include 25 elevation levels (0-24).
Here's a simplified version of what those variables look like:
/* styles.css */
:root {
--ig-elevation-0: none;
--ig-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.26),
0 1px 1px 0 rgba(0, 0, 0, 0.12),
0 2px 1px -1px rgba(0, 0, 0, 0.08);
/* ... */
--ig-elevation-24: 0 11px 15px -7px rgba(0, 0, 0, 0.26),
0 24px 38px 3px rgba(0, 0, 0, 0.12),
0 9px 46px 8px rgba(0, 0, 0, 0.08);
}
These are essentially stacked CSS box-shadow
declarations. You can replace them with any other valid box-shadow
value. The higher the elevation level number is, the bigger the shadow is. Again, different components use different elevation levels, to find out which elevation levels are used by which component, take look at the Components Documentation. We will take a deeper look at elevations in the Elevations of the documentation.
Configuration
There are several variables that allow you to configure the global behavior of the theme:
Roundness
To configure the radius factor of all components you can change the value of the --ig-radius-factor
variable. The default value is 1, meaning the default radius factor is used across component themes.
Example:
/* Makes all components appear blocky in shape */
:root {
--ig-radius-factor: 0;
}
Elevation Factor
To configure the elevation factor of all components you can change the value of the --ig-elevation-factor
variable. The default value is 1, meaning the default elevations are used across component themes.
Example:
/* Makes all components appear flat (no-shadows) */
:root {
--ig-elevation-factor: 0;
}
Component Variables
All components provide the ability to modify their themes using component-specific CSS variables. Each component exposes two variables that modify the same property. The exposed variables can be thought of as global
and local
. They both modify the component theme in the same way, the only difference is that global
variables have the igx-[component-name]
prefix attached to the variable name and can be used from parent selectors to style child components, while local
variables are specific to a component instance.
Let's look at an example. Say you wanted to modify the background of the avatar. The avatar looks for the following CSS variables that modify its background:
/* styles.css */
:root {
--igx-avatar-background: black;
}
igx-avatar {
--background: orange;
}
The snippet above will set the background in all avatars to orange.
The avatar component will look for the --background
variable first. If explicitly set, it will take its value. In other words, local
variables have higher priority and will work only if applied to the igx-avatar
directly, either by using its tag selector or any other selector that targets igx-avatar
.
The global --igx-avatar-background
can be thought of as fallback variable. It's going to be used only if the local --background
is not explicitly overridden.
For the curious, here's how this is implemented internally in the avatar:
igx-avatar {
--background: var(--igx-avatar-background, var(--ig-gray-400));
background: var(--background);
}
You would generally use global variables when you want to apply changes to all instances of a component while local variables target specific component instances and will always override the global variable.
Here's another example:
<!-- app.component.html -->
<igx-avatar>AB</igx-avatar>
<igx-avatar>CD</igx-avatar>
<app-contacts></app-contacts>
<!-- contacts.component.html -->
<igx-avatar>EF</igx-avatar>
<igx-avatar>GH</igx-avatar>
/* styles.css */
:root {
--igx-avatar-background: lavender;
}
/* contacts.component.css */
igx-avatar {
--background: purple;
}
Avatars AB
and CD
will use the globally set lavender color as background, while avatars EF
and GH
will have purple backgrounds.
Each component has all of its theme properties documented in the styling section of the component documentation.
This should be all you need to get you started with theming. You can modify global palette colors, elevations, and change component theme properties by creating global and local component themes. If you want to learn more, we have extensive documentation covering topics like Palettes, Elevations, Typography, and Theming with Sass in depth.
Additional Resources
Related topics:
Our community is active and always welcoming to new ideas.