Integrate Semantic UI Theme with Angular2


Semantic UI is a modern front-end development framework, powered by LESS and jQuery and it helps to create beautiful, responsive layouts using HTML. Semantic UI supports the theme, which can allow us to utilize single layout with different themes for different customers.

Further, Angular2 is ready for use for the enterprise application development and we are excited about it.  In this article, we will discuss how to incorporate Angular2 with Semantic UI and how you can leverage semantic theme concept.


  • Node.jsMake sure NodeJS is installed in your system
    • Refer to this link to download and install Node.js.
  • Gulp — Make sure Gulp is installed in your system
    • run npm install -g gulp to install gulp.

Getting Ready

Let’s take an example of bank application, which shows the list of loans in the card view, where each card has bank theme color as background color and status of the loan represented by button colors as shown below:


Often, we make CSS changes at the application level and the application becomes tightly coupled with one theme. When we want to use same layout (application) with another theme, it forces to have application changes.

Semantic UI solves this problem through theme support. To utilize Semantic theme we need to

  • create customer specific theme folder in the semantic theme directory
  • change the semantic UI components files for the components, which change depending on the selected theme for a given customer
  • generate CSS files for the changes made for a specific customer

For a given customer, we can refer to the corresponding generated CSS files. In this way, except replacing theme specific generated files, we don’t need to make any change in the application code to apply the new theme.

As part of this article, we will see, how to create and build a theme and refer generated files within the application. We will create a simple angular2 project through CLI, incorporate Semantic UI with this angular2 project and create a simple template (view) through Semantic UI, apply different themes for the same view for each build.

Steps for using Semantic UI and Angular 2.0 Application

Step 1: Install Angular2 CLI

Run the following command to install Angular CLI.

Once the command is executed successfully, you can see below output screen.


Step 2: Create project through Angular2 CLI

Run the following command to create Angular2 CLI project.

Once the command is successfully executed, you can see below output screen.


Step 3: Start Angular2 Project

Run the following command to start Angular2 CLI Project.

Once the command is successfully executed, you can see below output screen.


Step 4: Access application


Step 5: Integrate Semantic UI

We can integrate Semantic UI in two ways.

Approach 1

If you want to use Semantic UI as a dependency and just want to use the semantic default theme, use lighter semantic-ui-css.

  • Download semantic-ui-css, you can see below output screen ( after unzipping the file ).


  • Add this folder to your project, now, your project structure will be like this.


  • Update your project index.html to refer semantic.css and semantic.js files ( you can use minified files as well ).

  • Build simple semantic template (view), modify app.component.html to have semantic component cards with buttons (different colors).


1) Here, we display three cards, each card associated with the button which has the corresponding color.

2) Card1 and card2 buttons have primary and secondary colors, where they got derived as part of the default theme.

  • Refresh the application.


Approach 2

Install Semantic UI, to define your own theme around Semantic UI components.

  • create new folder semantictheme, to avoid merging complete semantic code and node_modules with the angular2 project, and run below command.


  •     Finally, you can see below screen.


  •     Once above two steps are completed, semantic folder looks like.



  • tasks – supports gulp tasks, to clean and build semantic files and keep built files in dist folder.
  • src
    • themes – which has different folders, whereas each folder represents client’s theme.
    • sites – here, you can override any theme variable (i.e. global variables).
    • definitions – here, you can see CSS classes, which were written based on themes/sites and you can add custom CSS classes as well.
    • theme.config – here, you can specify theme name about each component (i.e. you can configure different theme names about different components).
  • Add new theme folder wtc in the themes folder. To change button and card colors, copy the below files from the default folder to wtc folder and keep them in the same structure.


  • Modify themes/wtc/elements/button.variables to change primary and secondary colors.

  • Modify themes/wtc/views/card.variables to change card background color.

  • Update themes/theme.config to refer wtc theme about button and card components.

  • Run gulp build, it generates CSS and js files with latest changes and keeps them in dist folder.


  • Make this dist folder available to the application, so copy this dist folder and keeps with project workspace.


  • Update index.html to refer this latest dist(build) files.

  • Refresh application,  we see reflected wtc theme changes here.


  • Add one more new theme folder wtt in the themes folder and make the required files available like wtc theme folder.
  • Modify themes/wtt/elements/button.variables to change primary and secondary colors.

  • Modify themes/wtt/views/card.variables to change card background color.

  • Update themes/theme.config to refer wtt theme about button and card components

  • Do the gulp build, make the files available like wtc theme folder and refresh the application, we see reflected wtt theme changes here.



In this article, we learned how to incorporate semantic UI and theme with Angular 2. We found Semantic UI quite helpful and thought of sharing with you as well.

At WalkingTree we are very excited with possibilities that we see in Angular 2. We will be happy to connect with you and help you take advantage of this to build amazing web applications. 


Related Posts

Leave a comment

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.