- Infragistics theme
- Metro theme
- iOS theme
- Default bootstrap theme
- Superhero bootstrap theme
- Yeti bootstrap theme
- Flatly bootstrap theme
Setting Up the Project
You may download the starter project for this lesson by clicking here. (You can also download the final project by clicking here.)
After downloading the project, navigate to the directory and run the commands below:
- npm install
- npm start
Execute the npm install command to install all dependencies, and execute the npm start command to run the Angular application. If the project setup is correct, you will have a running Angular application as shown in the image below:
<link href="http://cdn-na.infragistics.com/IgniteUI/latest/css/themes/metro/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/IgniteUI/latest/css/structure/infragistics.css" rel="stylesheet" />
To work with any theme, you need a reference of Infragistics.css in addition to the theme reference.
Step 1 Changing to iOS Theme
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/ios/infragistics.theme.css" rel="stylesheet" />
Navigate to the application to find that all of the controls have been changed to the iOS theme. You may notice that the grid’s look and the navigation button's design have been changed.
Step 2 Changing to Default Bootstrap Theme
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/bootstrap/infragistics.theme.css" rel="stylesheet" />
Navigate to the application to find that all of the controls have been changed to the default basic bootstrap theme, along with the grid’s look and the navigation button's design.
Step 3 Using Your Own Bootstrap Theme
- To create a new bootstrap theme using the variables.less file.
- You can create your own variables.less file or use one of the bootstrap themes from Bootswatch. To use a theme from bootswatch, select the theme and download the variables.less file.
- Upload the variables.less file to the Ignite UI Theme Generator.
- Download the theme and unzip it.
- Save the downloaded theme in your application project.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="css/themes/infragistics.theme.css" rel="stylesheet" type="text/css" />
Navigate to the application to find that it is using the new theme.