Nebular is an Angular UI Library based on Eva Design System specifications, with 40+ UI components, 4 visual themes, Auth and Security modules.

In this article i want to share you how to integrate the nebular theme into your angular 8 application.

First, create a new project using angular CLI. Use the following command to create a new project.

ng new a8Theme

Once your project created successfully. Next, install the theme using the CLI.

Nebular supports init configuration with Angular Schematics. This means you can simply add it to your project, and Angular Schematics will do the rest:

ng add @nebular/theme

After installing the theme the following file will be updated

theme.scss file like this

@import '~@nebular/theme/styles/theming';
@import '~@nebular/theme/styles/themes/default';

$nb-themes: nb-register-theme((

// add your variables here like:

color-primary-100: #f2f6ff,
color-primary-200: #d9e4ff,
color-primary-300: #a6c1ff,
color-primary-400: #598bff,
color-primary-500: #3366ff,
color-primary-600: #274bdb,
color-primary-700: #1a34b8,
color-primary-800: #102694,
color-primary-900: #091c7a,

), default, default);

Your app.component.html file updated. The new code like

<nb-layout>

<nb-layout-header fixed>
<!-- Insert header here -->
</nb-layout-header>

<nb-layout-column>

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>

<router-outlet></router-outlet>

</nb-layout-column>

<nb-layout-footer fixed>
<!-- Insert footer here -->
</nb-layout-footer>

</nb-layout>

You app.module.ts file code updated like this

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NbThemeModule, NbLayoutModule } from '@nebular/theme';
import { NbEvaIconsModule } from '@nebular/eva-icons';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
NbThemeModule.forRoot({ name: 'default' }),
NbLayoutModule,
NbEvaIconsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

style.scss files updated like this

@import 'themes';

@import '~@nebular/theme/styles/globals';

@include nb-install() {
@include nb-theme-global();
};
/* You can add global styles to this file, and also import other style files */

Those changes are done automatically.

Build and Run the application using the following CLI command

ng serve

just finds the results on the browser

You use the all the components what you want into your application.

4 COMMENTS