Merge pull request #1 from akveo/master

merge to update

.travis.yml

@@ -4,8 +4,6 @@ sudo: false
 dist: trusty
 
 node_js:
-  - '8'
-  - '9'
   - '10'
 
 branches:

CHANGELOG.md

@@ -1,3 +1,81 @@
+<a name="4.0.1"></a>
+## [4.0.1](https://github.com/akveo/ngx-admin/compare/v4.0.0...v4.0.1) (2019-07-16)
+
+
+### Bug Fixes
+
+* **typography:** prevent bootstrap color override ([#2161](https://github.com/akveo/ngx-admin/issues/2161)) ([243390c](https://github.com/akveo/ngx-admin/commit/243390c))
+
+
+### Features
+
+* update Nebular to 4.1.2 ([#5451](https://github.com/akveo/ngx-admin/issues/5451)) ([a2e93f9](https://github.com/akveo/ngx-admin/commit/a2e93f9))
+
+
+
+<a name="4.0.0"></a>
+# [4.0.0](https://github.com/akveo/ngx-admin/compare/v3.2.0...v4.0.0) (2019-07-02)
+
+- Update to Nebular 4 based on Eva Design System
+- New Dark theme
+- Angular 8
+
+### Features
+
+* update to Angular 8, Nebular 4 ([#2114](https://github.com/akveo/ngx-admin/issues/2114)) ([e9600b4](https://github.com/akveo/ngx-admin/commit/e9600b4))
+
+
+
+<a name="3.2.1"></a>
+## [3.2.1](https://github.com/akveo/ngx-admin/compare/v3.2.0...v3.2.1) (2019-04-02)
+
+
+### Bug Fixes
+
+* update [@angular-devkit](https://github.com/angular-devkit)/build-angular to fix import aliases ([78695cd](https://github.com/akveo/ngx-admin/commit/78695cd))
+
+
+
+<a name="3.2.0"></a>
+# [3.2.0](https://github.com/akveo/ngx-admin/compare/v3.1.0...v3.2.0) (2019-04-02)
+
+
+### Bug Fixes
+
+* **dashboard:** update title country->region the orders list component  ([#1987](https://github.com/akveo/ngx-admin/issues/1987)) ([cf1bf4d](https://github.com/akveo/ngx-admin/commit/cf1bf4d))
+* **readme:** fix demo links ([#2028](https://github.com/akveo/ngx-admin/issues/2028)) ([1fb3205](https://github.com/akveo/ngx-admin/commit/1fb3205))
+* **rtl:** remove duplicate of nebular styles ([#1824](https://github.com/akveo/ngx-admin/issues/1824)) ([d8e7092](https://github.com/akveo/ngx-admin/commit/d8e7092))
+* **setting-sidebar:** Ie and firefox position bugs, linter ([#2023](https://github.com/akveo/ngx-admin/issues/2023)) ([8d471ba](https://github.com/akveo/ngx-admin/commit/8d471ba))
+* **sidebar:** Add Form Inputs extra component menu item ([#1966](https://github.com/akveo/ngx-admin/issues/1966)) ([658aa19](https://github.com/akveo/ngx-admin/commit/658aa19)), closes [#1965](https://github.com/akveo/ngx-admin/issues/1965)
+
+
+### Features
+
+* update dependencies (Angular, Nebular) ([#2072](https://github.com/akveo/ngx-admin/issues/2072)) ([db2f451](https://github.com/akveo/ngx-admin/commit/db2f451))
+
+
+
+<a name="3.1.0"></a>
+# [3.1.0](https://github.com/akveo/ngx-admin/compare/v3.0.0...v3.1.0) (2019-01-23)
+
+
+### Bug Fixes
+
+* **datepicker:** fix datepicker arrow style ([#1925](https://github.com/akveo/ngx-admin/issues/1925)) ([a878197](https://github.com/akveo/ngx-admin/commit/a878197))
+* **toggle-settings-button:** position while search open ([#1993](https://github.com/akveo/ngx-admin/issues/1993)) ([f17aa32](https://github.com/akveo/ngx-admin/commit/f17aa32))
+
+
+### Features
+
+* **animation:** add fade in animation by route change ([#1958](https://github.com/akveo/ngx-admin/issues/1958)) ([773c14e](https://github.com/akveo/ngx-admin/commit/773c14e))
+* **data:** update data module, add new mock data ([#1960](https://github.com/akveo/ngx-admin/issues/1960)) ([47d232b](https://github.com/akveo/ngx-admin/commit/47d232b))
+* **layout config:** reduce gear button size ([#2002](https://github.com/akveo/ngx-admin/issues/2002)) ([1f56f2a](https://github.com/akveo/ngx-admin/commit/1f56f2a))
+* **settings:** redesign setting sidebar ([#1982](https://github.com/akveo/ngx-admin/issues/1982)) ([a73662f](https://github.com/akveo/ngx-admin/commit/a73662f))
+* **sidebar:** remove label new from sidebar ([#1921](https://github.com/akveo/ngx-admin/issues/1921)) ([d80c8da](https://github.com/akveo/ngx-admin/commit/d80c8da))
+* update Nebular to 3.1.0 ([33db902](https://github.com/akveo/ngx-admin/commit/33db902))
+
+
+
 <a name="3.0.0"></a>
 # [3.0.0](https://github.com/akveo/ngx-admin/compare/v2.3.0...v3.0.0) (2018-11-19)
 

README.md

@@ -1,28 +1,33 @@
-[![Build Status](https://travis-ci.org/akveo/ngx-admin.svg?branch=master)](https://travis-ci.org/akveo/ngx-admin)
+# ngx-admin [<img src="https://i.imgur.com/oMcxwZ0.png" alt="Eva Design System" height="20px" />](https://eva.design) [![Build Status](https://travis-ci.org/akveo/ngx-admin.svg?branch=master)](https://travis-ci.org/akveo/ngx-admin) [![Dependency Status](https://david-dm.org/akveo/ngx-admin/status.svg)](https://david-dm.org/akveo/ng2-admin)
-[![Join the chat at https://gitter.im/ng2-admin/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ng2-admin/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-[![Dependency Status](https://david-dm.org/akveo/ngx-admin/status.svg)](https://david-dm.org/akveo/ng2-admin)
 
 [Who uses ngx-admin?](https://github.com/akveo/ngx-admin/issues/1645)| [Documentation](https://akveo.github.io/ngx-admin/?utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes) | [Installation Guidelines](https://akveo.github.io/ngx-admin/docs/getting-started/what-is-ngxadmin?utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes)
 
-# Admin template based on Angular 7+, Bootstrap 4 and <a href="https://github.com/akveo/nebular">Nebular</a>
+# Admin template based on Angular 8+ and <a href="https://github.com/akveo/nebular">Nebular</a>
-<a target="_blank" href="http://akveo.com/ngx-admin/#/pages/dashboard?theme=corporate&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=main_pic"><img src="https://i.imgur.com/OIL7rt8.png"/></a>
+<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=main_pic"><img src="https://i.imgur.com/mFdqvgG.png"/></a>
+
+### Backend Integration Bundles
+Easy way to integrate ngx-admin with .NET, Node.js, Java or PHP. [Checkout our Store](https://store.akveo.com/?utm_source=github&utm_medium=ngx_admin_readme) for ready to use Backend Bundles.
 
 
-### With 3 stunning visual themes
+### With 4 stunning visual themes
+
+
+
+#### Default
+<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=default&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/Kn3xDKQ.png"/></a>
+
+#### Dark
+<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=dark&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/FAn5iXY.png"/></a>
 
 #### Cosmic
-<a target="_blank" href="http://akveo.com/ngx-admin/?theme=cosmic&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes#/pages/dashboard"><img src="https://i.imgur.com/tvAJJhW.png"/></a>
+<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=cosmic&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/iJu2YDF.png"/></a>
 
 #### Corporate
-<a target="_blank" href="http://akveo.com/ngx-admin/?theme=corporate&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes#/pages/dashboard"><img src="https://i.imgur.com/wbEtUX4.jpg"/></a>
+<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/GpUt6NW.png"/></a>
-
-#### Light
-
-<a target="_blank" href="http://akveo.com/ngx-admin/?theme=default&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes#/pages/dashboard"><img src="https://i.imgur.com/cb9U34M.jpg"/></a>
 
 ### What's included:
 
-- Angular 7+ & Typescript
+- Angular 8+ & Typescript
 - Bootstrap 4+ & SCSS
 - Responsive layout
 - RTL support
@@ -32,10 +37,6 @@
 - 40+ Angular Components
 - 60+ Usage Examples
 
-### Hot Themes Reload
-
-<a target="_blank" href="http://akveo.com/ngx-admin/#/pages/dashboard?utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=demo"><img src="https://i.imgur.com/XoJtfvK.gif"/></a>
-
 ### Demo
 
 <a target="_blank" href="http://akveo.com/ngx-admin/">Live Demo</a>
@@ -46,9 +47,6 @@ This template is using [Nebular](https://github.com/akveo/nebular) modules set,
 ### Empty starter kit
 Don't need all the pages and modules and just looking for an empty starter kit for your next project? Check out our [starter-kit branch](https://github.com/akveo/ngx-admin/tree/starter-kit).
 
-### AngularJS 1.x version
-Here you can find AngularJS 1.x based version: [Blur Admin](http://akveo.github.io/blur-admin/)
-
 ## BrowserStack
 This project runs its tests on multiple desktop and mobile browsers using [BrowserStack](http://www.browserstack.com).
 

angular.json

@@ -12,6 +12,7 @@
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "preserveSymlinks": true,
+            "rebaseRootRelativeCssUrls": true,
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",

browserslist

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+IE 11

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-admin",
-  "version": "3.0.0",
+  "version": "4.0.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -9,11 +9,6 @@
   "bugs": {
     "url": "https://github.com/akveo/ngx-admin/issues"
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "IE 11"
-  ],
   "scripts": {
     "ng": "ng",
     "conventional-changelog": "conventional-changelog",
@@ -35,27 +30,25 @@
   },
   "dependencies": {
     "@agm/core": "^1.0.0-beta.5",
-    "@angular/animations": "^7.0.3",
+    "@angular/animations": "^8.0.0",
-    "@angular/cdk": "^7.0.3",
+    "@angular/cdk": "^8.0.0",
-    "@angular/common": "^7.0.3",
+    "@angular/common": "^8.0.0",
-    "@angular/compiler": "^7.0.3",
+    "@angular/compiler": "^8.0.0",
-    "@angular/core": "^7.0.3",
+    "@angular/core": "^8.0.0",
-    "@angular/forms": "^7.0.3",
+    "@angular/forms": "^8.0.0",
-    "@angular/http": "^7.0.3",
+    "@angular/platform-browser": "^8.0.0",
-    "@angular/platform-browser": "^7.0.3",
+    "@angular/platform-browser-dynamic": "^8.0.0",
-    "@angular/platform-browser-dynamic": "^7.0.3",
+    "@angular/router": "^8.0.0",
-    "@angular/router": "^7.0.3",
     "@asymmetrik/ngx-leaflet": "3.0.1",
-    "@nebular/auth": "3.0.0",
+    "@nebular/auth": "4.1.2",
-    "@nebular/bootstrap": "3.0.0",
+    "@nebular/eva-icons": "4.1.2",
-    "@nebular/security": "3.0.0",
+    "@nebular/security": "4.1.2",
-    "@nebular/theme": "3.0.0",
+    "@nebular/theme": "4.1.2",
-    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
     "@swimlane/ngx-charts": "^10.0.0",
     "angular-tree-component": "7.2.0",
     "angular2-chartjs": "0.4.1",
-    "angular2-toaster": "^6.1.0",
+    "angular2-toaster": "^7.0.0",
-    "bootstrap": "4.0.0",
+    "bootstrap": "4.3.1",
     "chart.js": "2.7.1",
     "ckeditor": "4.7.3",
     "classlist.js": "1.1.20150312",
@@ -70,22 +63,24 @@
     "ng2-completer": "2.0.8",
     "ng2-smart-table": "1.3.5",
     "ngx-echarts": "^4.0.1",
+    "node-sass": "^4.12.0",
     "normalize.css": "6.0.0",
     "pace-js": "1.0.2",
     "roboto-fontface": "0.8.0",
-    "rxjs": "6.3.0",
+    "rxjs": "6.5.2",
     "rxjs-compat": "6.3.0",
     "socicon": "3.0.5",
     "tinymce": "4.5.7",
+    "tslib": "^1.9.0",
     "typeface-exo": "0.0.22",
-    "web-animations-js": "2.2.5",
+    "web-animations-js": "github:angular/web-animations-js#release_pr208",
-    "zone.js": "^0.8.26"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.10.2",
+    "@angular-devkit/build-angular": "~0.800.2",
-    "@angular/compiler-cli": "^7.0.3",
+    "@angular/cli": "^8.0.2",
-    "@angular/cli": "^7.0.3",
+    "@angular/compiler-cli": "^8.0.0",
-    "@angular/language-service": "7.0.0",
+    "@angular/language-service": "8.0.0",
     "@compodoc/compodoc": "1.0.1",
     "@fortawesome/fontawesome-free": "^5.2.0",
     "@types/d3-color": "1.0.5",
@@ -94,7 +89,7 @@
     "@types/jasminewd2": "2.0.3",
     "@types/leaflet": "1.2.3",
     "@types/node": "6.0.90",
-    "codelyzer": "^4.5.0",
+    "codelyzer": "^5.0.1",
     "conventional-changelog-cli": "1.3.4",
     "husky": "0.13.3",
     "jasmine-core": "2.6.4",
@@ -110,8 +105,8 @@
     "rimraf": "2.6.1",
     "stylelint": "7.13.0",
     "ts-node": "3.2.2",
-    "tslint": "5.7.0",
+    "tslint": "^5.7.0",
     "tslint-language-service": "^0.9.9",
-    "typescript": "3.1.3"
+    "typescript": "3.4.5"
   }
 }

src/app/@core/core.module.ts

@@ -5,32 +5,93 @@ import { NbSecurityModule, NbRoleProvider } from '@nebular/security';
 import { of as observableOf } from 'rxjs';
 
 import { throwIfAlreadyLoaded } from './module-import-guard';
-import { DataModule } from './data/data.module';
 import {
   AnalyticsService,
   LayoutService,
   PlayerService,
   StateService,
 } from './utils';
+import { UserData } from './data/users';
+import { ElectricityData } from './data/electricity';
+import { SmartTableData } from './data/smart-table';
+import { UserActivityData } from './data/user-activity';
+import { OrdersChartData } from './data/orders-chart';
+import { ProfitChartData } from './data/profit-chart';
+import { TrafficListData } from './data/traffic-list';
+import { EarningData } from './data/earning';
+import { OrdersProfitChartData } from './data/orders-profit-chart';
+import { TrafficBarData } from './data/traffic-bar';
+import { ProfitBarAnimationChartData } from './data/profit-bar-animation-chart';
+import { TemperatureHumidityData } from './data/temperature-humidity';
+import { SolarData } from './data/solar';
+import { TrafficChartData } from './data/traffic-chart';
+import { StatsBarData } from './data/stats-bar';
+import { CountryOrderData } from './data/country-order';
+import { StatsProgressBarData } from './data/stats-progress-bar';
+import { VisitorsAnalyticsData } from './data/visitors-analytics';
+import { SecurityCamerasData } from './data/security-cameras';
+
+import { UserService } from './mock/users.service';
+import { ElectricityService } from './mock/electricity.service';
+import { SmartTableService } from './mock/smart-table.service';
+import { UserActivityService } from './mock/user-activity.service';
+import { OrdersChartService } from './mock/orders-chart.service';
+import { ProfitChartService } from './mock/profit-chart.service';
+import { TrafficListService } from './mock/traffic-list.service';
+import { EarningService } from './mock/earning.service';
+import { OrdersProfitChartService } from './mock/orders-profit-chart.service';
+import { TrafficBarService } from './mock/traffic-bar.service';
+import { ProfitBarAnimationChartService } from './mock/profit-bar-animation-chart.service';
+import { TemperatureHumidityService } from './mock/temperature-humidity.service';
+import { SolarService } from './mock/solar.service';
+import { TrafficChartService } from './mock/traffic-chart.service';
+import { StatsBarService } from './mock/stats-bar.service';
+import { CountryOrderService } from './mock/country-order.service';
+import { StatsProgressBarService } from './mock/stats-progress-bar.service';
+import { VisitorsAnalyticsService } from './mock/visitors-analytics.service';
+import { SecurityCamerasService } from './mock/security-cameras.service';
+import { MockDataModule } from './mock/mock-data.module';
 
 const socialLinks = [
   {
     url: 'https://github.com/akveo/nebular',
     target: '_blank',
-    icon: 'socicon-github',
+    icon: 'github',
   },
   {
     url: 'https://www.facebook.com/akveo/',
     target: '_blank',
-    icon: 'socicon-facebook',
+    icon: 'facebook',
   },
   {
     url: 'https://twitter.com/akveo_inc',
     target: '_blank',
-    icon: 'socicon-twitter',
+    icon: 'twitter',
   },
 ];
 
+const DATA_SERVICES = [
+  { provide: UserData, useClass: UserService },
+  { provide: ElectricityData, useClass: ElectricityService },
+  { provide: SmartTableData, useClass: SmartTableService },
+  { provide: UserActivityData, useClass: UserActivityService },
+  { provide: OrdersChartData, useClass: OrdersChartService },
+  { provide: ProfitChartData, useClass: ProfitChartService },
+  { provide: TrafficListData, useClass: TrafficListService },
+  { provide: EarningData, useClass: EarningService },
+  { provide: OrdersProfitChartData, useClass: OrdersProfitChartService },
+  { provide: TrafficBarData, useClass: TrafficBarService },
+  { provide: ProfitBarAnimationChartData, useClass: ProfitBarAnimationChartService },
+  { provide: TemperatureHumidityData, useClass: TemperatureHumidityService },
+  { provide: SolarData, useClass: SolarService },
+  { provide: TrafficChartData, useClass: TrafficChartService },
+  { provide: StatsBarData, useClass: StatsBarService },
+  { provide: CountryOrderData, useClass: CountryOrderService },
+  { provide: StatsProgressBarData, useClass: StatsProgressBarService },
+  { provide: VisitorsAnalyticsData, useClass: VisitorsAnalyticsService },
+  { provide: SecurityCamerasData, useClass: SecurityCamerasService },
+];
+
 export class NbSimpleRoleProvider extends NbRoleProvider {
   getRole() {
     // here you could provide any role based on any auth flow
@@ -39,7 +100,8 @@ export class NbSimpleRoleProvider extends NbRoleProvider {
 }
 
 export const NB_CORE_PROVIDERS = [
-  ...DataModule.forRoot().providers,
+  ...MockDataModule.forRoot().providers,
+  ...DATA_SERVICES,
   ...NbAuthModule.forRoot({
 
     strategies: [

src/app/@core/data/country-order.ts

@@ -0,0 +1,6 @@
+import { Observable } from 'rxjs';
+
+export abstract class CountryOrderData {
+  abstract getCountriesCategories(): Observable<string[]>;
+  abstract getCountriesCategoriesData(country: string): Observable<number[]>;
+}

src/app/@core/data/earning.ts

@@ -0,0 +1,21 @@
+import { Observable } from 'rxjs';
+
+export interface LiveUpdateChart {
+  liveChart: { value: [string, number] }[];
+  delta: {
+    up: boolean;
+    value: number;
+  };
+  dailyIncome: number;
+}
+
+export interface PieChart {
+  value: number;
+  name: string;
+}
+
+export abstract class EarningData {
+  abstract getEarningLiveUpdateCardData(currency: string): Observable<any[]>;
+  abstract getEarningCardData(currency: string): Observable<LiveUpdateChart>;
+  abstract getEarningPieChartData(): Observable<PieChart[]>;
+}

src/app/@core/data/electricity.ts

@@ -0,0 +1,25 @@
+import { Observable } from 'rxjs';
+
+export interface Month {
+  month: string;
+  delta: string;
+  down: boolean;
+  kWatts: string;
+  cost: string;
+}
+
+export interface Electricity {
+  title: string;
+  active?: boolean;
+  months: Month[];
+}
+
+export interface ElectricityChart {
+  label: string;
+  value: number;
+}
+
+export abstract class ElectricityData {
+  abstract getListData(): Observable<Electricity[]>;
+  abstract getChartData(): Observable<ElectricityChart[]>;
+}

src/app/@core/data/orders-chart.ts

@@ -0,0 +1,8 @@
+export interface OrdersChart {
+  chartLabel: string[];
+  linesData: number[][];
+}
+
+export abstract class OrdersChartData {
+  abstract getOrdersChartData(period: string): OrdersChart;
+}

src/app/@core/data/orders-profit-chart.ts

@@ -0,0 +1,14 @@
+import { Observable } from 'rxjs';
+import { OrdersChart } from './orders-chart';
+import { ProfitChart  } from './profit-chart';
+
+export interface OrderProfitChartSummary {
+  title: string;
+  value: number;
+}
+
+export abstract class OrdersProfitChartData {
+  abstract getOrderProfitChartSummary(): Observable<OrderProfitChartSummary[]>;
+  abstract getOrdersChartData(period: string): Observable<OrdersChart>;
+  abstract getProfitChartData(period: string): Observable<ProfitChart>;
+}

src/app/@core/data/profit-bar-animation-chart.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+
+export abstract class ProfitBarAnimationChartData {
+  abstract getChartData(): Observable<{ firstLine: number[]; secondLine: number[]; }>;
+}

src/app/@core/data/profit-chart.ts

@@ -0,0 +1,8 @@
+export interface ProfitChart {
+  chartLabel: string[];
+  data: number[][];
+}
+
+export abstract class ProfitChartData {
+  abstract getProfitChartData(period: string): ProfitChart;
+}

src/app/@core/data/security-cameras.ts

@@ -0,0 +1,10 @@
+import { Observable } from 'rxjs';
+
+export interface Camera {
+  title: string;
+  source: string;
+}
+
+export abstract class SecurityCamerasData {
+  abstract getCamerasData(): Observable<Camera[]>;
+}

src/app/@core/data/smart-table.ts

@@ -0,0 +1,4 @@
+
+export abstract class SmartTableData {
+  abstract getData(): any[];
+}

src/app/@core/data/solar.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+
+export abstract class SolarData {
+  abstract getSolarData(): Observable<number>;
+}

src/app/@core/data/stats-bar.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+
+export abstract class StatsBarData {
+  abstract getStatsBarData(): Observable<number[]>;
+}

src/app/@core/data/stats-progress-bar.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs';
+
+export interface ProgressInfo {
+  title: string;
+  value: number;
+  activeProgress: number;
+  description: string;
+}
+
+export abstract class StatsProgressBarData {
+  abstract getProgressInfoData(): Observable<ProgressInfo[]>;
+}

src/app/@core/data/temperature-humidity.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs';
+
+export interface Temperature {
+  value: number;
+  min: number;
+  max: number;
+}
+
+export abstract class TemperatureHumidityData {
+  abstract getTemperatureData(): Observable<Temperature>;
+  abstract getHumidityData(): Observable<Temperature>;
+}

src/app/@core/data/traffic-bar.ts

@@ -0,0 +1,11 @@
+import { Observable } from 'rxjs';
+
+export interface TrafficBar {
+  data: number[];
+  labels: string[];
+  formatter: string;
+}
+
+export abstract class TrafficBarData {
+  abstract getTrafficBarData(period: string): Observable<TrafficBar>;
+}

src/app/@core/data/traffic-chart.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+
+export abstract class TrafficChartData {
+  abstract getTrafficChartData(): Observable<number[]>;
+}

src/app/@core/data/traffic-list.ts

@@ -0,0 +1,20 @@
+import { Observable } from 'rxjs';
+
+export interface TrafficList {
+  date: string;
+  value: number;
+  delta: {
+    up: boolean;
+    value: number;
+  };
+  comparison: {
+    prevDate: string;
+    prevValue: number;
+    nextDate: string;
+    nextValue: number;
+  };
+}
+
+export abstract class TrafficListData {
+  abstract getTrafficListData(period: string): Observable<TrafficList>;
+}

src/app/@core/data/user-activity.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs';
+
+export interface UserActive {
+  date: string;
+  pagesVisitCount: number;
+  deltaUp: boolean;
+  newVisits: number;
+}
+
+export abstract class UserActivityData {
+  abstract getUserActivityData(period: string): Observable<UserActive[]>;
+}

src/app/@core/data/users.ts

@@ -0,0 +1,21 @@
+import { Observable } from 'rxjs';
+
+export interface User {
+  name: string;
+  picture: string;
+}
+
+export interface Contacts {
+  user: User;
+  type: string;
+}
+
+export interface RecentUsers extends Contacts {
+  time: number;
+}
+
+export abstract class UserData {
+  abstract getUsers(): Observable<User[]>;
+  abstract getContacts(): Observable<Contacts[]>;
+  abstract getRecentUsers(): Observable<RecentUsers[]>;
+}

src/app/@core/data/visitors-analytics.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs';
+
+export interface OutlineData {
+  label: string;
+  value: number;
+}
+
+export abstract class VisitorsAnalyticsData {
+  abstract getInnerLineChartData(): Observable<number[]>;
+  abstract getOutlineLineChartData(): Observable<OutlineData[]>;
+  abstract getPieChartData(): Observable<number>;
+}

src/app/@core/mock/README.md

@@ -0,0 +1 @@
+Application-wise data providers.

src/app/@core/mock/country-order.service.ts

@@ -1,8 +1,9 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf, Observable } from 'rxjs';
+import { CountryOrderData } from '../data/country-order';
 
 @Injectable()
-export class CountryOrderService {
+export class CountryOrderService extends CountryOrderData {
 
   private countriesCategories = [
     'Sofas',
@@ -22,7 +23,7 @@ export class CountryOrderService {
     return observableOf(this.countriesCategories);
   }
 
-  getCountriesCategoriesData(): Observable<number[]> {
+  getCountriesCategoriesData(country: string): Observable<number[]> {
     return observableOf(this.generateRandomData(this.countriesCategoriesLength));
   }
 }

src/app/@core/mock/earning.service.ts

@@ -1,22 +1,9 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf, Observable } from 'rxjs';
-
+import { LiveUpdateChart, PieChart, EarningData } from '../data/earning';
-export class LiveUpdateChart {
-  liveChart: { value: [string, number] }[];
-  delta: {
-    up: boolean;
-    value: number;
-  };
-  dailyIncome: number;
-}
-
-export class PieChart {
-  value: number;
-  name: string;
-}
 
 @Injectable()
-export class EarningService {
+export class EarningService extends EarningData {
 
   private currentDate: Date = new Date();
   private currentValue = Math.random() * 1000;
@@ -92,7 +79,7 @@ export class EarningService {
     };
   }
 
-  generateRandomEarningData(currency) {
+  getEarningLiveUpdateCardData(currency): Observable<any[]> {
     const data = this.liveUpdateChartData[currency.toLowerCase()];
     const newValue = this.generateRandomLiveChartData();
 
@@ -102,7 +89,7 @@ export class EarningService {
     return observableOf(data.liveChart);
   }
 
-  getEarningLiveUpdateCardData(currency: string) {
+  getEarningCardData(currency: string): Observable<LiveUpdateChart> {
     const data = this.liveUpdateChartData[currency.toLowerCase()];
 
     data.liveChart = this.getDefaultLiveChartData(150);

src/app/@core/mock/electricity.service.ts

@@ -1,27 +1,9 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf, Observable } from 'rxjs';
-
+import { Electricity, ElectricityChart, ElectricityData } from '../data/electricity';
-class Month {
-  month: string;
-  delta: string;
-  down: boolean;
-  kWatts: string;
-  cost: string;
-}
-
-export class Electricity {
-  title: string;
-  active?: boolean;
-  months: Month[];
-}
-
-export class ElectricityChart {
-  label: string;
-  value: number;
-}
 
 @Injectable()
-export class ElectricityService {
+export class ElectricityService extends ElectricityData {
 
   private listData: Electricity[] = [
     {
@@ -96,6 +78,7 @@ export class ElectricityService {
   chartData: ElectricityChart[];
 
   constructor() {
+    super();
     this.chartData = this.chartPoints.map((p, index) => ({
       label: (index % 5 === 3) ? `${Math.round(index / 5)}` : '',
       value: p,

src/app/@core/mock/mock-data.module.ts

@@ -53,10 +53,10 @@ const SERVICES = [
     ...SERVICES,
   ],
 })
-export class DataModule {
+export class MockDataModule {
   static forRoot(): ModuleWithProviders {
     return <ModuleWithProviders>{
-      ngModule: DataModule,
+      ngModule: MockDataModule,
       providers: [
         ...SERVICES,
       ],

src/app/@core/mock/orders-chart.service.ts

@@ -1,13 +1,9 @@
 import { Injectable } from '@angular/core';
 import { PeriodsService } from './periods.service';
-
+import { OrdersChart, OrdersChartData } from '../data/orders-chart';
-export class OrdersChart {
-  chartLabel: string[];
-  linesData: number[][];
-}
 
 @Injectable()
-export class OrdersChartService {
+export class OrdersChartService extends OrdersChartData {
 
   private year = [
     '2012',
@@ -22,6 +18,7 @@ export class OrdersChartService {
   private data = { };
 
   constructor(private period: PeriodsService) {
+    super();
     this.data = {
       week: this.getDataForWeekPeriod(),
       month: this.getDataForMonthPeriod(),

src/app/@core/mock/orders-profit-chart.service.ts

@@ -1,15 +1,11 @@
 import { of as observableOf,  Observable } from 'rxjs';
 import { Injectable } from '@angular/core';
-import { OrdersChart, OrdersChartService } from './orders-chart.service';
+import { OrdersChart, OrdersChartData } from '../data/orders-chart';
-import { ProfitChart, ProfitChartService } from './profit-chart.service';
+import { OrderProfitChartSummary, OrdersProfitChartData } from '../data/orders-profit-chart';
-
+import { ProfitChart, ProfitChartData } from '../data/profit-chart';
-export class OrderProfitChartSummary {
-  title: string;
-  value: number;
-}
 
 @Injectable()
-export class OrdersProfitChartService {
+export class OrdersProfitChartService extends OrdersProfitChartData {
 
   private summary = [
     {
@@ -30,8 +26,9 @@ export class OrdersProfitChartService {
     },
   ];
 
-  constructor(private ordersChartService: OrdersChartService,
+  constructor(private ordersChartService: OrdersChartData,
-              private profitChartService: ProfitChartService) {
+              private profitChartService: ProfitChartData) {
+    super();
   }
 
   getOrderProfitChartSummary(): Observable<OrderProfitChartSummary[]> {

src/app/@core/mock/profit-bar-animation-chart.service.ts

@@ -1,12 +1,14 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf,  Observable } from 'rxjs';
+import { ProfitBarAnimationChartData } from '../data/profit-bar-animation-chart';
 
 @Injectable()
-export class ProfitBarAnimationChartService {
+export class ProfitBarAnimationChartService extends ProfitBarAnimationChartData {
 
   private data: any;
 
   constructor() {
+    super();
     this.data = {
       firstLine: this.getDataForFirstLine(),
       secondLine: this.getDataForSecondLine(),

src/app/@core/mock/profit-chart.service.ts

@@ -1,13 +1,9 @@
 import { Injectable } from '@angular/core';
 import { PeriodsService } from './periods.service';
-
+import { ProfitChart, ProfitChartData } from '../data/profit-chart';
-export class ProfitChart {
-  chartLabel: string[];
-  data: number[][];
-}
 
 @Injectable()
-export class ProfitChartService {
+export class ProfitChartService extends ProfitChartData {
 
   private year = [
     '2012',
@@ -22,6 +18,7 @@ export class ProfitChartService {
   private data = { };
 
   constructor(private period: PeriodsService) {
+    super();
     this.data = {
       week: this.getDataForWeekPeriod(),
       month: this.getDataForMonthPeriod(),

src/app/@core/mock/security-cameras.service.ts

@@ -1,13 +1,9 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf, Observable } from 'rxjs';
-
+import { Camera, SecurityCamerasData } from '../data/security-cameras';
-export class Camera {
-  title: string;
-  source: string;
-}
 
 @Injectable()
-export class SecurityCamerasService {
+export class SecurityCamerasService extends SecurityCamerasData {
 
   private cameras: Camera[] = [
     {

src/app/@core/mock/smart-table.service.ts

@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
+import { SmartTableData } from '../data/smart-table';
 
 @Injectable()
-export class SmartTableService {
+export class SmartTableService extends SmartTableData {
 
   data = [{
     id: 1,

src/app/@core/mock/solar.service.ts

@@ -1,8 +1,9 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf,  Observable } from 'rxjs';
+import { SolarData } from '../data/solar';
 
 @Injectable()
-export class SolarService {
+export class SolarService extends SolarData {
   private value = 42;
 
   getSolarData(): Observable<number> {

src/app/@core/mock/stats-bar.service.ts

@@ -1,8 +1,9 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf, Observable } from 'rxjs';
+import { StatsBarData } from '../data/stats-bar';
 
 @Injectable()
-export class StatsBarService {
+export class StatsBarService extends StatsBarData {
 
   private statsBarData: number[] = [
     300, 520, 435, 530,

src/app/@core/mock/stats-progress-bar.service.ts

@@ -1,15 +1,9 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf, Observable } from 'rxjs';
-
+import { ProgressInfo, StatsProgressBarData } from '../data/stats-progress-bar';
-export class ProgressInfo {
-  title: string;
-  value: number;
-  activeProgress: number;
-  description: string;
-}
 
 @Injectable()
-export class StatsProgressBarService {
+export class StatsProgressBarService extends StatsProgressBarData {
   private progressInfoData: ProgressInfo[] = [
     {
       title: 'Today’s Profit',

src/app/@core/mock/temperature-humidity.service.ts

@@ -1,14 +1,9 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf,  Observable } from 'rxjs';
-
+import { TemperatureHumidityData, Temperature } from '../data/temperature-humidity';
-export class Temperature {
-  value: number;
-  min: number;
-  max: number;
-}
 
 @Injectable()
-export class TemperatureHumidityService {
+export class TemperatureHumidityService extends TemperatureHumidityData {
 
   private temperatureDate: Temperature = {
     value: 24,

src/app/@core/mock/traffic-bar.service.ts

@@ -1,19 +1,15 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf,  Observable } from 'rxjs';
 import { PeriodsService } from './periods.service';
-
+import { TrafficBarData, TrafficBar } from '../data/traffic-bar';
-export class TrafficBar {
-  data: number[];
-  labels: string[];
-  formatter: string;
-}
 
 @Injectable()
-export class TrafficBarService {
+export class TrafficBarService extends TrafficBarData {
 
   private data = { };
 
   constructor(private period: PeriodsService) {
+    super();
     this.data = {
       week: this.getDataForWeekPeriod(),
       month: this.getDataForMonthPeriod(),

src/app/@core/mock/traffic-chart.service.ts

@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf,  Observable } from 'rxjs';
-
+import { TrafficChartData } from '../data/traffic-chart';
 
 @Injectable()
-export class TrafficChartService {
+export class TrafficChartService extends TrafficChartData {
 
   private data: number[] = [
     300, 520, 435, 530,

src/app/@core/mock/traffic-list.service.ts

@@ -1,29 +1,16 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf,  Observable } from 'rxjs';
 import { PeriodsService } from './periods.service';
-
+import { TrafficList, TrafficListData } from '../data/traffic-list';
-export class TrafficList {
-  date: string;
-  value: number;
-  delta: {
-    up: boolean;
-    value: number;
-  };
-  comparison: {
-    prevDate: string;
-    prevValue: number;
-    nextDate: string;
-    nextValue: number;
-  };
-}
 
 @Injectable()
-export class TrafficListService {
+export class TrafficListService extends TrafficListData {
 
   private getRandom = (roundTo: number) => Math.round(Math.random() * roundTo);
   private data = {};
 
   constructor(private period: PeriodsService) {
+    super();
     this.data = {
       week: this.getDataWeek(),
       month: this.getDataMonth(),
@@ -44,10 +31,8 @@ export class TrafficListService {
   private getDataMonth(): TrafficList[] {
     const getFirstDateInPeriod = () => {
       const months = this.period.getMonths();
-      const date = new Date();
-      const prevYear = date.getFullYear() - 1;
 
-      return `${months[months.length - 1]}, ${prevYear}`;
+      return months[months.length - 1];
     };
 
     return this.reduceData(this.period.getMonths(), getFirstDateInPeriod);

src/app/@core/mock/user-activity.service.ts

@@ -1,16 +1,10 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf,  Observable } from 'rxjs';
 import { PeriodsService } from './periods.service';
-
+import { UserActive, UserActivityData } from '../data/user-activity';
-export class UserActive {
-  date: string;
-  pagesVisitCount: number;
-  deltaUp: boolean;
-  newVisits: number;
-}
 
 @Injectable()
-export class UserActivityService {
+export class UserActivityService extends UserActivityData {
 
   private getRandom = (roundTo: number) => Math.round(Math.random() * roundTo);
   private generateUserActivityRandomData(date) {
@@ -25,6 +19,7 @@ export class UserActivityService {
   data = {};
 
   constructor(private periods: PeriodsService) {
+    super();
     this.data = {
       week: this.getDataWeek(),
       month: this.getDataMonth(),

src/app/@core/mock/users.service.ts

@@ -1,23 +1,9 @@
-
 import { of as observableOf,  Observable } from 'rxjs';
 import { Injectable } from '@angular/core';
-
+import { Contacts, RecentUsers, UserData } from '../data/users';
-class User {
-  name: string;
-  picture: string;
-}
-
-export class Contacts {
-  user: User;
-  type: string;
-}
-
-export class RecentUsers extends Contacts {
-  time: number;
-}
 
 @Injectable()
-export class UserService {
+export class UserService extends UserData {
 
   private time: Date = new Date;
 

src/app/@core/mock/visitors-analytics.service.ts

@@ -1,16 +1,13 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf, Observable } from 'rxjs';
 import { PeriodsService } from './periods.service';
-
+import { OutlineData, VisitorsAnalyticsData } from '../data/visitors-analytics';
-export class OutlineData {
-  label: string;
-  value: number;
-}
 
 @Injectable()
-export class VisitorsAnalyticsService {
+export class VisitorsAnalyticsService extends VisitorsAnalyticsData {
 
   constructor(private periodService: PeriodsService) {
+    super();
   }
 
   private pieChartValue = 75;

src/app/@theme/components/footer/footer.component.scss

@@ -13,11 +13,11 @@
 
     a {
       padding: 0.4rem;
-      color: nb-theme(color-fg);
+      color: nb-theme(text-hint-color);
       transition: color ease-out 0.1s;
 
       &:hover {
-        color: nb-theme(color-fg-heading);
+        color: nb-theme(text-basic-color);
       }
     }
   }

src/app/@theme/components/footer/footer.component.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   selector: 'ngx-footer',
   styleUrls: ['./footer.component.scss'],
   template: `
-    <span class="created-by">Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2017</span>
+    <span class="created-by">Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2019</span>
     <div class="socials">
       <a href="#" target="_blank" class="ion ion-social-github"></a>
       <a href="#" target="_blank" class="ion ion-social-facebook"></a>

src/app/@theme/components/header/header.component.html

@@ -1,26 +1,29 @@
-<div class="header-container"
+<div class="header-container">
-     [class.left]="position === 'normal'"
+  <div class="logo-container">
-     [class.right]="position === 'inverse'">
+    <a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
-  <div class="logo-containter">
+      <nb-icon icon="menu-2-outline"></nb-icon>
-    <a (click)="toggleSidebar()" href="#" class="navigation"><i class="nb-menu"></i></a>
+    </a>
-    <div class="logo" (click)="goToHome()">ngx-<span>admin</span></div>
+    <a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
   </div>
-  <ngx-theme-switcher></ngx-theme-switcher>
+  <nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
+    <nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
+  </nb-select>
 </div>
 
 <div class="header-container">
-  <ngx-layout-direction-switcher></ngx-layout-direction-switcher>
+  <nb-actions size="small">
-  <nb-actions
+
-    size="medium"
-    [class.right]="position === 'normal'"
-    [class.left]="position === 'inverse'">
-    <nb-action *nbIsGranted="['view', 'user']" >
-      <nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
-    </nb-action>
-    <nb-action class="control-item" disabled icon="nb-notifications"></nb-action>
-    <nb-action class="control-item" icon="nb-email"></nb-action>
     <nb-action class="control-item">
-      <nb-search type="rotate-layout" (click)="startSearch()"></nb-search>
+      <nb-search type="rotate-layout"></nb-search>
+    </nb-action>
+    <nb-action class="control-item" icon="email-outline"></nb-action>
+    <nb-action class="control-item" icon="bell-outline"></nb-action>
+    <nb-action class="user-action" *nbIsGranted="['view', 'user']" >
+      <nb-user [nbContextMenu]="userMenu"
+               [onlyPicture]="userPictureOnly"
+               [name]="user?.name"
+               [picture]="user?.picture">
+      </nb-user>
     </nb-action>
   </nb-actions>
 </div>

src/app/@theme/components/header/header.component.scss

@@ -1,31 +1,30 @@
-@import '../../styles/themes';
 @import '~bootstrap/scss/mixins/breakpoints';
 @import '~@nebular/theme/styles/global/breakpoints';
+@import '../../styles/themes';
 
 @include nb-install-component() {
   display: flex;
   justify-content: space-between;
   width: 100%;
 
-  .left {
+  .logo-container {
-    display: flex;
-    width: 100%;
-    order: 0;
-    flex-direction: row;
-  }
-  .right {
-    order: 1;
-    flex-direction: row-reverse;
-  }
-
-  .logo-containter {
     display: flex;
     align-items: center;
     width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)});
   }
 
-  .control-item {
+  nb-action {
-    display: block;
+    height: auto;
+    display: flex;
+    align-content: center;
+  }
+
+  nb-user {
+    cursor: pointer;
+  }
+
+  ::ng-deep nb-search button {
+    padding: 0!important;
   }
 
   .header-container {
@@ -33,179 +32,38 @@
     align-items: center;
     width: auto;
 
-    .navigation {
+    .sidebar-toggle {
-      @include nb-ltr(padding-right, nb-theme(padding));
+      @include nb-ltr(padding-right, 1.25rem);
-      @include nb-rtl(padding-left, nb-theme(padding));
+      @include nb-rtl(padding-left, 1.25rem);
-      font-size: 2.5rem;
       text-decoration: none;
-
+      color: nb-theme(text-hint-color);
-      i {
+      nb-icon {
-        display: block;
+        font-size: 1.75rem;
       }
-
     }
 
     .logo {
-      padding: 0 nb-theme(padding);
+      padding: 0 1.25rem;
       font-size: 1.75rem;
-      font-weight: nb-theme(font-weight-bolder);
+      @include nb-ltr(border-left, 1px solid nb-theme(divider-color));
-      @include nb-ltr(border-left, 1px solid nb-theme(separator));
+      @include nb-rtl(border-right, 1px solid nb-theme(divider-color));
-      @include nb-rtl(border-right, 1px solid nb-theme(separator));
       white-space: nowrap;
-
+      text-decoration: none;
-      span {
-        font-weight: nb-theme(font-weight-normal);
-      }
-    }
-  }
-
-  @include nb-for-theme(corporate) {
-    $menu-action-separator-color: #3f4550;
-
-    nb-action {
-      @include nb-ltr(border-left-color, $menu-action-separator-color);
-      @include nb-rtl(border-right-color, $menu-action-separator-color);
-    }
-
-    .header-container .logo {
-      @include nb-ltr(border, none);
-      @include nb-rtl(border, none);
-    }
-
-    .header-container /deep/ ngx-theme-switcher .dropdown-toggle {
-      color: nb-theme(color-white);
-      background: transparent;
-    }
-  }
-
-  ngx-layout-direction-switcher {
-    margin: 0 1.5rem;
-  }
-
-  ngx-theme-switcher {
-    margin: nb-theme(layout-padding);
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  @include media-breakpoint-down(xl) {
-    ngx-layout-direction-switcher {
-      display: none;
-    }
-  }
-
-  .toggle-settings /deep/ a {
-    display: block;
-    text-decoration: none;
-    line-height: 1;
-
-    i {
-      color: nb-theme(color-fg-highlight);
-      font-size: 2.25rem;
-      border-radius: 50%;
-      position: relative;
-      animation-name: pulse-light;
-
-      &::after {
-        content: ' ';
-        // hack to be able to set border-radius
-        background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
-        border-radius: 50%;
-        pointer-events: none;
-
-        position: absolute;
-        top: 52.3%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 13%;
-        height: 13%;
-
-        animation: 3s linear infinite pulse;
-
-        @include nb-for-theme(default) {
-          animation-name: pulse-light;
-        }
-      }
-    }
-  }
-
-  @include keyframes(pulse) {
-    0% {
-      box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
-    }
-    20% {
-      box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
-    }
-    100% {
-      box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
-    }
-  }
-
-  @include keyframes(pulse-light) {
-    0% {
-      box-shadow: 0 0 1px 0 rgba(115, 255, 208, 0);
-    }
-    20% {
-      box-shadow: 0 0 3px 10px rgba(115, 255, 208, 0.4);
-    }
-    100% {
-      box-shadow: 0 0 5px 20px rgba(115, 255, 208, 0);
-    }
-  }
-
-  @include media-breakpoint-down(md) {
-
-    nb-action:not(.toggle-settings) {
-      border: none;
-    }
-
-    .control-item {
-      display: none;
-    }
-
-    .toggle-settings {
-      padding: 0;
-    }
-
-    ngx-layout-direction-switcher {
-      display: none;
-    }
-
-    ngx-theme-switcher {
-      margin: 0 0.5rem;
     }
   }
 
   @include media-breakpoint-down(sm) {
-
+    .control-item {
-    nb-user /deep/ .user-name {
       display: none;
     }
-  }
+    .user-action {
-
+      border: none;
-  @include media-breakpoint-down(is) {
-
-    .header-container {
-      .logo {
-        font-size: 1.25rem;
-      }
-    }
-
-    .toggle-settings {
-      display: none;
-    }
-
-    ngx-theme-switcher {
-      display: none;
-    }
-
-    nb-action:not(.toggle-settings) {
       padding: 0;
     }
   }
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(is) {
-    .right /deep/ {
+    nb-select {
       display: none;
     }
   }

src/app/@theme/components/header/header.component.ts

@@ -1,33 +1,83 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
 
-import { NbMenuService, NbSidebarService } from '@nebular/theme';
+import { UserData } from '../../../@core/data/users';
-import { UserService } from '../../../@core/data/users.service';
-import { AnalyticsService } from '../../../@core/utils';
 import { LayoutService } from '../../../@core/utils';
+import { map, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 @Component({
   selector: 'ngx-header',
   styleUrls: ['./header.component.scss'],
   templateUrl: './header.component.html',
 })
-export class HeaderComponent implements OnInit {
+export class HeaderComponent implements OnInit, OnDestroy {
-
-  @Input() position = 'normal';
 
+  private destroy$: Subject<void> = new Subject<void>();
+  userPictureOnly: boolean = false;
   user: any;
 
-  userMenu = [{ title: 'Profile' }, { title: 'Log out' }];
+  themes = [
+    {
+      value: 'default',
+      name: 'Light',
+    },
+    {
+      value: 'dark',
+      name: 'Dark',
+    },
+    {
+      value: 'cosmic',
+      name: 'Cosmic',
+    },
+    {
+      value: 'corporate',
+      name: 'Corporate',
+    },
+  ];
+
+  currentTheme = 'default';
+
+  userMenu = [ { title: 'Profile' }, { title: 'Log out' } ];
 
   constructor(private sidebarService: NbSidebarService,
               private menuService: NbMenuService,
-              private userService: UserService,
+              private themeService: NbThemeService,
-              private analyticsService: AnalyticsService,
+              private userService: UserData,
-              private layoutService: LayoutService) {
+              private layoutService: LayoutService,
+              private breakpointService: NbMediaBreakpointsService) {
   }
 
   ngOnInit() {
+    this.currentTheme = this.themeService.currentTheme;
+
     this.userService.getUsers()
+      .pipe(takeUntil(this.destroy$))
       .subscribe((users: any) => this.user = users.nick);
+
+    const { xl } = this.breakpointService.getBreakpointsMap();
+    this.themeService.onMediaQueryChange()
+      .pipe(
+        map(([, currentBreakpoint]) => currentBreakpoint.width < xl),
+        takeUntil(this.destroy$),
+      )
+      .subscribe((isLessThanXl: boolean) => this.userPictureOnly = isLessThanXl);
+
+    this.themeService.onThemeChange()
+      .pipe(
+        map(({ name }) => name),
+        takeUntil(this.destroy$),
+      )
+      .subscribe(themeName => this.currentTheme = themeName);
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  changeTheme(themeName: string) {
+    this.themeService.changeTheme(themeName);
   }
 
   toggleSidebar(): boolean {
@@ -37,17 +87,8 @@ export class HeaderComponent implements OnInit {
     return false;
   }
 
-  toggleSettings(): boolean {
+  navigateHome() {
-    this.sidebarService.toggle(false, 'settings-sidebar');
+    this.menuService.navigateHome();
-
     return false;
   }
-
-  goToHome() {
-    this.menuService.navigateHome();
-  }
-
-  startSearch() {
-    this.analyticsService.trackEvent('startSearch');
-  }
 }

src/app/@theme/components/index.ts

@@ -2,9 +2,3 @@ export * from './header/header.component';
 export * from './footer/footer.component';
 export * from './search-input/search-input.component';
 export * from './tiny-mce/tiny-mce.component';
-export * from './theme-settings/theme-settings.component';
-export * from './theme-switcher/theme-switcher.component';
-export * from './switcher/switcher.component';
-export * from './layout-direction-switcher/layout-direction-switcher.component';
-export * from './theme-switcher/themes-switcher-list/themes-switcher-list.component';
-export * from './toggle-settings-button/toggle-settings-button.component';

src/app/@theme/components/layout-direction-switcher/layout-direction-switcher.component.ts

@@ -1,42 +0,0 @@
-import { Component, OnDestroy, Input } from '@angular/core';
-import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators';
-
-@Component({
-  selector: 'ngx-layout-direction-switcher',
-  template: `
-    <ngx-switcher
-      [firstValue]="directions.RTL"
-      [secondValue]="directions.LTR"
-      [firstValueLabel]="'RTL'"
-      [secondValueLabel]="'LTR'"
-      [value]="currentDirection"
-      (valueChange)="toggleDirection($event)"
-      [vertical]="vertical"
-    >
-    </ngx-switcher>
-  `,
-})
-export class LayoutDirectionSwitcherComponent implements OnDestroy {
-  directions = NbLayoutDirection;
-  currentDirection: NbLayoutDirection;
-  alive = true;
-
-  @Input() vertical: boolean = false;
-
-  constructor(private directionService: NbLayoutDirectionService) {
-    this.currentDirection = this.directionService.getDirection();
-
-    this.directionService.onDirectionChange()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(newDirection => this.currentDirection = newDirection);
-  }
-
-  toggleDirection(newDirection) {
-    this.directionService.setDirection(newDirection);
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

src/app/@theme/components/search-input/search-input.component.scss

@@ -25,7 +25,7 @@
     }
   }
 
-  /deep/ search-input {
+  ::ng-deep search-input {
     input {
       background: transparent;
     }

src/app/@theme/components/search-input/search-input.component.ts

@@ -14,7 +14,7 @@ import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular
   `,
 })
 export class SearchInputComponent {
-  @ViewChild('input') input: ElementRef;
+  @ViewChild('input', { static: true }) input: ElementRef;
 
   @Output() search: EventEmitter<string> = new EventEmitter<string>();
 

src/app/@theme/components/switcher/switcher.component.scss

@@ -1,112 +0,0 @@
-@import '../../styles/themes';
-@import '~@nebular/bootstrap/styles/hero-buttons';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-  .switch-label {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    margin: 0;
-
-    &.vertical {
-      flex-direction: column;
-      align-items: flex-start;
-
-      .first,
-      .second {
-        padding: 0;
-      }
-
-      .switch {
-        margin-top: 0.5em;
-      }
-    }
-
-    & > span {
-      font-size: 1.125rem;
-      font-weight: nb-theme(font-weight-bold);
-      transition: opacity 0.3s ease;
-      color: nb-theme(color-fg);
-
-      &.first {
-        @include nb-ltr(padding-right, 10px);
-        @include nb-rtl(padding-left, 10px);
-      }
-
-      &.second {
-        @include nb-ltr(padding-left, 10px);
-        @include nb-rtl(padding-right, 10px);
-      }
-
-      &.active {
-        color: nb-theme(color-fg-text);
-      }
-
-      @include nb-for-theme(cosmic) {
-        color: nb-theme(color-fg);
-
-        &.active {
-          color: nb-theme(color-white);
-        }
-      }
-
-      &:active {
-        opacity: 0.78;
-      }
-    }
-  }
-
-  .switch {
-    position: relative;
-    display: inline-block;
-    width: 3rem;
-    height: 1.5rem;
-    margin: 0;
-
-    input {
-      display: none;
-
-      &:checked + .slider::before {
-        @include nb-ltr(transform, translateX(1.5rem));
-        @include nb-rtl(transform, translateX(-1.5rem));
-      }
-    }
-
-    .slider {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: 1.75rem;
-      background-color: nb-theme(layout-bg);
-    }
-
-    .slider::before {
-      position: absolute;
-      content: '';
-      height: 1.5rem;
-      width: 1.5rem;
-      border-radius: 50%;
-      background-color: nb-theme(color-success);
-      transition: 0.2s;
-
-      box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);
-
-      @include nb-for-theme(cosmic) {
-        @include btn-hero-primary-gradient();
-      }
-
-      @include nb-for-theme(corporate) {
-        background-color: nb-theme(color-primary);
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    align-items: flex-end;
-  }
-}

src/app/@theme/components/switcher/switcher.component.ts

@@ -1,60 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'ngx-switcher',
-  styleUrls: ['./switcher.component.scss'],
-  template: `
-    <label class="switch-label" [class.vertical]="vertical">
-      <span class="first" [class.active]="vertical || isFirstValue()">
-        {{vertical ? currentValueLabel() : firstValueLabel}}
-      </span>
-
-      <div class="switch">
-        <input type="checkbox" [checked]="isSecondValue()" (change)="changeValue()">
-        <span class="slider"></span>
-      </div>
-
-      <span
-        *ngIf="!vertical"
-        class="second"
-        [class.active]="isSecondValue()"
-      >
-          {{secondValueLabel}}
-      </span>
-    </label>
-  `,
-})
-export class SwitcherComponent {
-  @Input() firstValue: any;
-  @Input() secondValue: any;
-
-  @Input() firstValueLabel: string;
-  @Input() secondValueLabel: string;
-
-  @Input() vertical: boolean;
-
-  @Input() value: any;
-  @Output() valueChange = new EventEmitter<any>();
-
-  isFirstValue() {
-    return this.value === this.firstValue;
-  }
-
-  isSecondValue() {
-    return this.value === this.secondValue;
-  }
-
-  currentValueLabel() {
-    return this.isFirstValue()
-      ? this.firstValueLabel
-      : this.secondValueLabel;
-  }
-
-  changeValue() {
-    this.value = this.isFirstValue()
-      ? this.secondValue
-      : this.firstValue;
-
-    this.valueChange.emit(this.value);
-  }
-}

src/app/@theme/components/theme-settings/theme-settings.component.scss

@@ -1,91 +0,0 @@
-@import '../../styles/themes';
-
-@include nb-install-component() {
-  h6 {
-    margin-bottom: 0.875rem;
-    text-align: center;
-    font-weight: bold;
-    text-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
-  }
-
-  .settings-row {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    width: 100%;
-    margin: 0 0 2.575rem;
-
-    a {
-      display: flex;
-      justify-content: center;
-      align-content: center;
-      align-items: center;
-      width: 4.15rem;
-      height: 4.15rem;
-      border-radius: nb-theme(radius);
-      background-color: nb-theme(color-white);
-      border: 2px solid transparent;
-      margin: 0.875rem;
-      text-decoration: none;
-      font-size: 2.25rem;
-      color: nb-theme(color-fg);
-
-      &.selected {
-        color: nb-theme(color-success);
-        border-color: nb-theme(color-success);
-      }
-
-      @include nb-for-theme(cosmic) {
-        box-shadow: 0 4px 14px 0 rgba(19, 19, 94, 0.4);
-        background-color: #3e367e;
-        border: 2px solid #3e367e;
-        &.selected {
-          color: nb-theme(link-color);
-        }
-      }
-    }
-  }
-
-  .settings {
-    margin-bottom: 1em;
-  }
-
-  .switcher {
-    margin-bottom: 1rem;
-    font-size: 1.524rem;
-    width: 12rem;
-
-    /deep/ ngx-switcher {
-      .switch-label span {
-        font-size: 1em;
-        font-weight: normal;
-        &.first, &.second {
-          font-size: 1rem;
-        }
-      }
-
-      .switch {
-        height: 1.5em;
-        width: 3em;
-
-        .slider::before {
-          height: 1.5em;
-          width: 1.5em;
-        }
-
-        input:checked + .slider::before {
-          @include nb-ltr(transform, translateX(1.5em)!important);
-          @include nb-rtl(transform, translateX(-1.5em)!important);
-        }
-      }
-
-      @include nb-for-theme(cosmic) {
-        .switch .slider {
-          background-color: nb-theme(color-bg);
-        }
-      }
-    }
-  }
-}

src/app/@theme/components/theme-settings/theme-settings.component.ts

@@ -1,70 +0,0 @@
-import { Component } from '@angular/core';
-
-import { StateService } from '../../../@core/utils';
-
-@Component({
-  selector: 'ngx-theme-settings',
-  styleUrls: ['./theme-settings.component.scss'],
-  template: `
-    <h6>LAYOUTS</h6>
-    <div class="settings-row">
-      <a *ngFor="let layout of layouts"
-         href="#"
-         [class.selected]="layout.selected"
-         [attr.title]="layout.name"
-         (click)="layoutSelect(layout)">
-        <i [attr.class]="layout.icon"></i>
-      </a>
-    </div>
-    <h6>SIDEBAR</h6>
-    <div class="settings-row">
-      <a *ngFor="let sidebar of sidebars"
-         href="#"
-         [class.selected]="sidebar.selected"
-         [attr.title]="sidebar.name"
-         (click)="sidebarSelect(sidebar)">
-        <i [attr.class]="sidebar.icon"></i>
-      </a>
-    </div>
-    <div class="settings-row">
-      <div class="switcher">
-        <ngx-layout-direction-switcher></ngx-layout-direction-switcher>
-      </div>
-    </div>
-  `,
-})
-export class ThemeSettingsComponent {
-
-  layouts = [];
-  sidebars = [];
-
-  constructor(protected stateService: StateService) {
-    this.stateService.getLayoutStates()
-      .subscribe((layouts: any[]) => this.layouts = layouts);
-
-    this.stateService.getSidebarStates()
-      .subscribe((sidebars: any[]) => this.sidebars = sidebars);
-  }
-
-  layoutSelect(layout: any): boolean {
-    this.layouts = this.layouts.map((l: any) => {
-      l.selected = false;
-      return l;
-    });
-
-    layout.selected = true;
-    this.stateService.setLayoutState(layout);
-    return false;
-  }
-
-  sidebarSelect(sidebars: any): boolean {
-    this.sidebars = this.sidebars.map((s: any) => {
-      s.selected = false;
-      return s;
-    });
-
-    sidebars.selected = true;
-    this.stateService.setSidebarState(sidebars);
-    return false;
-  }
-}

src/app/@theme/components/theme-switcher/theme-switcher.component.html

@@ -1,7 +0,0 @@
-<div class="themes-switcher"
-     [nbPopover]="switcherListComponent"
-     nbPopoverPlacement="bottom"
-     [nbPopoverContext]="{popover: popover}">
-  <i class="nb-drops"></i>
-  <span *ngIf="showTitle">Themes</span>
-</div>

src/app/@theme/components/theme-switcher/theme-switcher.component.scss

@@ -1,50 +0,0 @@
-@import '../../styles/themes';
-@import '~@nebular/theme/styles/core/mixins';
-@import '~@nebular/theme/styles/core/functions';
-
-@include nb-install-component() {
-  .themes-switcher {
-    display: flex;
-    font-size: 1.25rem;
-    padding: 0.8rem 1.25rem;
-    align-items: center;
-    cursor: pointer;
-    background-color: nb-theme(switcher-background);
-    border-radius: nb-theme(radius);
-
-    &:hover {
-      $color: nb-theme(switcher-background);
-      $percentage: nb-theme(switcher-background-percentage);
-
-      background-color: tint($color, $percentage);
-    }
-
-    span {
-      margin: 0 1.2rem;
-    }
-
-    i {
-      color: nb-theme(color-primary);
-      font-size: 1.8rem;
-      border-radius: 50%;
-      position: relative;
-
-      @include nb-for-theme(default) {
-        color: nb-theme(color-success);
-      }
-
-      @include nb-for-theme(corporate) {
-        color: nb-theme(color-fg-highlight);
-      }
-
-      &::before {
-        // Hack for IE11, IE11 should not set background
-        background: nb-theme(drops-icon-line-gadient);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-      }
-    }
-  }
-}
-
-

src/app/@theme/components/theme-switcher/theme-switcher.component.ts

@@ -1,19 +0,0 @@
-import { Component, Input, ViewChild } from '@angular/core';
-import { NbPopoverDirective } from '@nebular/theme';
-import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
-
-import { ThemeSwitcherListComponent } from './themes-switcher-list/themes-switcher-list.component';
-
-@Component({
-  selector: 'ngx-theme-switcher',
-  templateUrl: './theme-switcher.component.html',
-  styleUrls: ['./theme-switcher.component.scss'],
-})
-export class ThemeSwitcherComponent {
-  @ViewChild(NbPopoverDirective) popover: NbPopoverDirective;
-
-  @Input() showTitle: boolean = true;
-
-  switcherListComponent = ThemeSwitcherListComponent;
-  theme: NbJSThemeOptions;
-}

src/app/@theme/components/theme-switcher/themes-switcher-list/theme-switcher-list.component.scss

@@ -1,76 +0,0 @@
-@import '../../../styles/themes';
-@import '~@nebular/theme/styles/core/mixins';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-$icon-color-default: #0bbb79;
-$icon-color-cosmic: #7958fa;
-$icon-color-corporate: #a7a2be;
-
-$icon-top-color-default: #01dbb5;
-$icon-top-color-cosmic: #a258fe;
-$icon-top-color-corporate: #e9e8eb;
-
-@include nb-install-component() {
-  /deep/ .themes-switcher-list {
-    padding: 1rem 2rem 1.25rem 0.5rem;
-    margin: 0;
-
-    @include nb-ltr(text-align, start);
-    @include nb-rtl(text-align, end);
-
-    .themes-switcher-item {
-      list-style: none;
-      cursor: pointer;
-
-      &:hover span {
-        opacity: 0.5;
-      }
-
-      i {
-        font-size: 2rem;
-
-        &.drop-icon-default {
-          color: $icon-color-default;
-
-          // Hack for IE11, IE11 should not set background
-          background: -webkit-linear-gradient($icon-top-color-default, $icon-color-default);
-        }
-
-        &.drop-icon-cosmic {
-          color: $icon-color-cosmic;
-
-          // Hack for IE11, IE11 should not set background
-          background: -webkit-linear-gradient($icon-top-color-cosmic, $icon-color-cosmic);
-        }
-
-        &.drop-icon-corporate {
-          color: $icon-color-corporate;
-
-          // Hack for IE11, IE11 should not set background
-          background: -webkit-linear-gradient($icon-top-color-corporate, $icon-color-corporate);
-        }
-
-        &.drop-icon-default,
-        &.drop-icon-cosmic,
-        &.drop-icon-corporate {
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-        }
-      }
-
-      span {
-        font-weight: 300;
-        vertical-align: super;
-        padding-left: 1rem;
-        color: nb-theme(color-fg-heading);
-      }
-    }
-  }
-
-  @include media-breakpoint-down(is) {
-    /deep/ .themes-switcher-list {
-      display: none;
-    }
-  }
-}

src/app/@theme/components/theme-switcher/themes-switcher-list/themes-switcher-list.component.ts

@@ -1,51 +0,0 @@
-import {Component, Input} from '@angular/core';
-import { NbThemeService, NbPopoverDirective } from '@nebular/theme';
-import { AnalyticsService } from '../../../../@core/utils/analytics.service';
-import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
-
-@Component({
-  selector: 'ngx-theme-switcher-list',
-  template: `
-    <ul class="themes-switcher-list">
-      <li class="themes-switcher-item"
-          *ngFor="let theme of themes"
-          (click)="onToggleTheme(theme.key)">
-        <i class="nb-drop" [ngClass]="'drop-icon-' + theme.key"></i>
-        <span>{{ theme.title }}</span>
-      </li>
-    </ul>
-  `,
-  styleUrls: ['./theme-switcher-list.component.scss'],
-})
-export class ThemeSwitcherListComponent {
-
-  @Input() popover: NbPopoverDirective;
-
-  theme: NbJSThemeOptions;
-
-  themes = [
-    {
-      title: 'Light',
-      key: 'default',
-    },
-    {
-      title: 'Cosmic',
-      key: 'cosmic',
-    },
-    {
-      title: 'Corporate',
-      key: 'corporate',
-    },
-  ];
-
-  constructor(
-    private themeService: NbThemeService,
-    private analyticsService: AnalyticsService,
-  ) {}
-
-  onToggleTheme(themeKey: string) {
-    this.themeService.changeTheme(themeKey);
-    this.analyticsService.trackEvent('switchTheme');
-    this.popover.hide();
-  }
-}

src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss

@@ -1,97 +0,0 @@
-@import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-  .toggle-settings {
-    position: fixed;
-    top: 50%;
-    height: 8.575rem;
-    width: 8.575rem;
-    border: none;
-    transition: transform 0.3s ease, background-image 0.3s ease;
-    transform: translate(0, -50%);
-    z-index: 998;
-
-    @include nb-ltr() {
-      border-top-left-radius: nb-theme(radius);
-      border-bottom-left-radius: nb-theme(radius);
-      right: 0;
-
-      &.sidebarEnd {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        right: auto;
-        border-top-right-radius: nb-theme(radius);
-        border-bottom-right-radius: nb-theme(radius);
-        left: 0;
-      }
-    }
-
-    @include nb-rtl() {
-      border-top-right-radius: nb-theme(radius);
-      border-bottom-right-radius: nb-theme(radius);
-      left: 0;
-
-      &.sidebarEnd {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        left: auto;
-        border-top-left-radius: nb-theme(radius);
-        border-bottom-left-radius: nb-theme(radius);
-        right: 0;
-      }
-    }
-
-    &.expanded {
-      @include nb-ltr(transform, translate(-19rem, -50%));
-      @include nb-rtl(transform, translate(19rem, -50%));
-
-      &.sidebarEnd {
-        @include nb-rtl(transform, translate(-19rem, -50%));
-        @include nb-ltr(transform, translate(19rem, -50%));
-      }
-    }
-
-    @include nb-for-theme(cosmic) {
-      box-shadow: 0 0 3.4285rem 0 rgba(19, 19, 94, 0.72);
-      background-image: linear-gradient(to right, #a054fe 0%, #7a58ff 100%);
-
-      &.expanded {
-        background-image: linear-gradient(to right, #2f296b 0%, #2f296b 100%);
-      }
-    }
-
-    @include nb-for-theme(default) {
-      border: 1px solid #d5dbe0;
-      box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
-      background-color: #ffffff;
-    }
-
-    @include nb-for-theme(corporate) {
-      border: 1px solid #d5dbe0;
-      box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
-      color: nb-theme(color-danger);
-      background-color: #ffffff;
-    }
-
-    i {
-      font-size: 6rem;
-      color: #ffffff;
-
-      @include nb-for-theme(default) {
-        color: nb-theme(color-danger);
-      }
-
-      @include nb-for-theme(corporate) {
-        color: nb-theme(color-warning);
-      }
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-    .toggle-settings {
-      display: none;
-    }
-  }
-}

src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts

@@ -1,33 +0,0 @@
-import { Component } from '@angular/core';
-import { NbSidebarService } from '@nebular/theme';
-import { StateService } from '../../../@core/utils';
-
-@Component({
-  selector: 'ngx-toggle-settings-button',
-  styleUrls: ['./toggle-settings-button.component.scss'],
-  template: `
-    <button class="toggle-settings"
-            (click)="toggleSettings()"
-            [class.expanded]="expanded"
-            [class.sidebarEnd]="sidebarEnd">
-      <i class="nb-gear"></i>
-    </button>
-  `,
-})
-export class ToggleSettingsButtonComponent {
-
-  sidebarEnd = false;
-  expanded = false;
-
-  constructor(private sidebarService: NbSidebarService, protected stateService: StateService) {
-    this.stateService.onSidebarState()
-      .subscribe(({id}) => {
-        this.sidebarEnd = id === 'end';
-      });
-  }
-
-  toggleSettings() {
-    this.sidebarService.toggle(false, 'settings-sidebar');
-    this.expanded = !this.expanded;
-  }
-}

src/app/@theme/layouts/index.ts

@@ -1,4 +1,3 @@
 export * from './one-column/one-column.layout';
 export * from './two-columns/two-columns.layout';
 export * from './three-columns/three-columns.layout';
-export * from './sample/sample.layout';

src/app/@theme/layouts/one-column/one-column.layout.scss

@@ -3,155 +3,7 @@
 @import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
-  nb-layout-column.small {
+  .menu-sidebar ::ng-deep .scrollable {
-    flex: 0.15 !important;
+    padding-top: nb-theme(layout-padding-top);
-  }
-
-  nb-sidebar.settings-sidebar {
-    $sidebar-width: 7.5rem;
-
-    transition: width 0.3s ease;
-    width: $sidebar-width;
-    overflow: hidden;
-
-    &.collapsed {
-      width: 0;
-
-      /deep/ .main-container {
-        width: 0;
-
-        .scrollable {
-          width: $sidebar-width;
-          padding: 1.25rem;
-        }
-      }
-    }
-
-    /deep/ .main-container {
-      width: $sidebar-width;
-      background: nb-theme(color-bg);
-      transition: width 0.3s ease;
-      overflow: hidden;
-
-      .scrollable {
-        width: $sidebar-width;
-      }
-
-      @include nb-for-theme(cosmic) {
-        background: nb-theme(layout-bg);
-      }
-    }
-  }
-
-  nb-sidebar.menu-sidebar {
-
-    margin-top: nb-theme(sidebar-header-gap);
-
-    @include nb-for-theme(corporate) {
-      margin-top: 0;
-    }
-
-    /deep/ .main-container {
-      height:
-        calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
-      @include nb-ltr(border-top-right-radius, nb-theme(radius));
-      @include nb-rtl(border-top-left-radius, nb-theme(radius));
-
-      @include nb-for-theme(corporate) {
-        border: 1px solid nb-theme(separator);
-        height:
-          calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-      }
-    }
-
-    /deep/ .scrollable {
-      @include nb-for-theme(corporate) {
-        padding-top: 0;
-
-        .menu-item:first-child {
-          border-top: none;
-        }
-      }
-    }
-
-    /deep/ nb-sidebar-header {
-      padding-bottom: 0.5rem;
-      text-align: center;
-    }
-
-    background: transparent;
-
-    .main-btn {
-      padding: 0.75rem 2.5rem;
-      margin-top: -2rem;
-      font-weight: bold;
-      transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
-
-      @include nb-for-theme(corporate) {
-        border-radius: nb-theme(radius);
-      }
-
-      i {
-        font-size: 2rem;
-        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-      }
-      span {
-        @include nb-ltr(padding-left, 0.25rem);
-        @include nb-rtl(padding-right, 0.25rem);
-      }
-
-      i, span {
-        vertical-align: middle;
-      }
-    }
-
-    &.compacted {
-
-      /deep/ nb-sidebar-header {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      .main-btn {
-        width: 46px;
-        height: 44px;
-        padding: 0.375rem;
-        border-radius: 5px;
-        transition: none;
-
-        span {
-          display: none;
-        }
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    .main-content {
-      padding: 0.75rem !important;
-
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-
-    nb-sidebar.menu-sidebar {
-
-      margin-top: 0;
-
-      /deep/ .main-container {
-        height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-        @include nb-ltr(border-top-right-radius, 0);
-        @include nb-rtl(border-top-left-radius, 0);
-
-        .scrollable {
-          padding-top: 0;
-        }
-      }
-    }
-
-    .main-btn {
-      display: none;
-    }
   }
 }

src/app/@theme/layouts/one-column/one-column.layout.ts

@@ -1,23 +1,15 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators';
 
-// TODO: move layouts into the framework
 @Component({
   selector: 'ngx-one-column-layout',
   styleUrls: ['./one-column.layout.scss'],
   template: `
-    <nb-layout>
+    <nb-layout windowMode>
       <nb-layout-header fixed>
         <ngx-header></ngx-header>
       </nb-layout-header>
 
       <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
-        <nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
-          <a href="#" class="btn btn-hero-success main-btn">
-            <i class="ion ion-social-github"></i> <span>Support Us</span>
-          </a>
-        </nb-sidebar-header>
         <ng-content select="nb-menu"></ng-content>
       </nb-sidebar>
 
@@ -31,21 +23,4 @@ import { takeWhile } from 'rxjs/operators';
     </nb-layout>
   `,
 })
-export class OneColumnLayoutComponent implements OnDestroy {
+export class OneColumnLayoutComponent {}
-
-  private alive = true;
-
-  currentTheme: string;
-
-  constructor(protected themeService: NbThemeService) {
-    this.themeService.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(theme => {
-        this.currentTheme = theme.name;
-    });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

src/app/@theme/layouts/sample/sample.layout.scss

@@ -1,181 +0,0 @@
-@import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-  nb-layout-column.small {
-    flex: 0.15 !important;
-  }
-
-  nb-sidebar.settings-sidebar {
-    $sidebar-width: 19rem;
-
-    transition: transform 0.3s ease;
-    width: $sidebar-width;
-    overflow: hidden;
-    @include nb-ltr(transform, translateX(100%));
-    @include nb-rtl(transform, translateX(-100%));
-    &.start {
-      @include nb-ltr(transform, translateX(-100%));
-      @include nb-rtl(transform, translateX(100%));
-    }
-
-    &.expanded, &.expanded.start {
-      transform: translateX(0);
-    }
-
-    /deep/ .scrollable {
-      width: $sidebar-width;
-      padding: 3.4rem 0.25rem;
-    }
-
-    /deep/ .main-container {
-      width: $sidebar-width;
-      background: nb-theme(color-bg);
-      transition: width 0.3s ease;
-      overflow: hidden;
-
-      .scrollable {
-        width: $sidebar-width;
-      }
-
-      @include nb-for-theme(cosmic) {
-        background: nb-theme(layout-bg);
-      }
-    }
-  }
-
-  nb-sidebar.menu-sidebar {
-
-    margin-top: nb-theme(sidebar-header-gap);
-
-    @include nb-for-theme(corporate) {
-      margin-top: 0;
-    }
-
-    /deep/ .main-container {
-      height:
-        calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
-      @include nb-ltr(border-top-right-radius, nb-theme(radius));
-      @include nb-rtl(border-top-left-radius, nb-theme(radius));
-
-      @include nb-for-theme(corporate) {
-        border: 1px solid nb-theme(separator);
-        height:
-          calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-      }
-    }
-
-    /deep/ .scrollable {
-      @include nb-for-theme(corporate) {
-        padding-top: 0;
-
-        .menu-item:first-child {
-          border-top: none;
-        }
-      }
-    }
-
-    /deep/ nb-sidebar-header {
-      padding-bottom: 0.5rem;
-      text-align: center;
-    }
-
-    background: transparent;
-
-    .main-btn {
-      padding: 0.75rem 2.5rem;
-      margin-top: -2rem;
-      font-weight: bold;
-      transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
-
-      @include nb-for-theme(corporate) {
-        border-radius: nb-theme(radius);
-      }
-
-      i {
-        font-size: 2rem;
-        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-      }
-      span {
-        @include nb-ltr(padding-left, 0.25rem);
-        @include nb-rtl(padding-right, 0.25rem);
-      }
-
-      i, span {
-        vertical-align: middle;
-      }
-    }
-
-    /deep/ nb-menu {
-      & > .menu-items {
-        & > .menu-item:first-child {
-          .menu-title {
-            &::after {
-              content: 'new';
-              color: nb-theme(color-white);
-              margin-left: 1rem;
-              background: nb-theme(color-danger);
-              padding: 0 0.5rem;
-              border-radius: nb-theme(radius);
-              font-size: nb-theme(font-size-sm);
-            }
-          }
-        }
-      }
-
-      .nb-e-commerce {
-        font-size: 2rem;
-      }
-    }
-
-    &.compacted {
-
-      /deep/ nb-sidebar-header {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      .main-btn {
-        width: 46px;
-        height: 44px;
-        padding: 0.375rem;
-        border-radius: 5px;
-        transition: none;
-
-        span {
-          display: none;
-        }
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    .main-content {
-      padding: 0.75rem !important;
-
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-
-    nb-sidebar.menu-sidebar {
-
-      margin-top: 0;
-
-      /deep/ .main-container {
-        height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-        @include nb-ltr(border-top-right-radius, 0);
-        @include nb-rtl(border-top-left-radius, 0);
-
-        .scrollable {
-          padding-top: 0;
-        }
-      }
-    }
-
-    .main-btn {
-      display: none;
-    }
-  }
-}

src/app/@theme/layouts/sample/sample.layout.ts

@@ -1,152 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { delay, withLatestFrom, takeWhile } from 'rxjs/operators';
-import {
-  NbMediaBreakpoint,
-  NbMediaBreakpointsService,
-  NbMenuItem,
-  NbMenuService,
-  NbSidebarService,
-  NbThemeService,
-} from '@nebular/theme';
-
-import { StateService } from '../../../@core/utils';
-
-// TODO: move layouts into the framework
-@Component({
-  selector: 'ngx-sample-layout',
-  styleUrls: ['./sample.layout.scss'],
-  template: `
-    <nb-layout [center]="layout.id === 'center-column'" windowMode>
-      <nb-layout-header fixed>
-        <ngx-header [position]="sidebar.id === 'start' ? 'normal': 'inverse'"></ngx-header>
-      </nb-layout-header>
-
-      <nb-sidebar class="menu-sidebar"
-                   tag="menu-sidebar"
-                   responsive
-                   [end]="sidebar.id === 'end'">
-        <nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
-          <a href="#" class="btn btn-hero-success main-btn">
-            <i class="ion ion-social-github"></i> <span>Support Us</span>
-          </a>
-        </nb-sidebar-header>
-        <ng-content select="nb-menu"></ng-content>
-      </nb-sidebar>
-
-      <nb-layout-column class="main-content">
-        <ng-content select="router-outlet"></ng-content>
-      </nb-layout-column>
-
-      <nb-layout-column start class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'">
-        <nb-menu [items]="subMenu"></nb-menu>
-      </nb-layout-column>
-
-      <nb-layout-column class="small" *ngIf="layout.id === 'three-column'">
-        <nb-menu [items]="subMenu"></nb-menu>
-      </nb-layout-column>
-
-      <nb-layout-footer fixed>
-        <ngx-footer></ngx-footer>
-      </nb-layout-footer>
-
-      <nb-sidebar class="settings-sidebar"
-                   tag="settings-sidebar"
-                   state="collapsed"
-                   fixed
-                   [end]="sidebar.id !== 'end'">
-        <ngx-theme-settings></ngx-theme-settings>
-      </nb-sidebar>
-    </nb-layout>
-    <ngx-toggle-settings-button></ngx-toggle-settings-button>
-  `,
-})
-export class SampleLayoutComponent implements OnDestroy {
-
-  subMenu: NbMenuItem[] = [
-    {
-      title: 'PAGE LEVEL MENU',
-      group: true,
-    },
-    {
-      title: 'Buttons',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/buttons',
-    },
-    {
-      title: 'Grid',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/grid',
-    },
-    {
-      title: 'Icons',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/icons',
-    },
-    {
-      title: 'Modals',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/modals',
-    },
-    {
-      title: 'Typography',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/typography',
-    },
-    {
-      title: 'Animated Searches',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/search-fields',
-    },
-    {
-      title: 'Tabs',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/tabs',
-    },
-  ];
-  layout: any = {};
-  sidebar: any = {};
-
-  private alive = true;
-
-  currentTheme: string;
-
-  constructor(protected stateService: StateService,
-              protected menuService: NbMenuService,
-              protected themeService: NbThemeService,
-              protected bpService: NbMediaBreakpointsService,
-              protected sidebarService: NbSidebarService) {
-    this.stateService.onLayoutState()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe((layout: string) => this.layout = layout);
-
-    this.stateService.onSidebarState()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe((sidebar: string) => {
-        this.sidebar = sidebar;
-      });
-
-    const isBp = this.bpService.getByName('is');
-    this.menuService.onItemSelect()
-      .pipe(
-        takeWhile(() => this.alive),
-        withLatestFrom(this.themeService.onMediaQueryChange()),
-        delay(20),
-      )
-      .subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
-
-        if (bpTo.width <= isBp.width) {
-          this.sidebarService.collapse('menu-sidebar');
-        }
-      });
-
-    this.themeService.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(theme => {
-        this.currentTheme = theme.name;
-    });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

src/app/@theme/layouts/three-columns/three-columns.layout.scss

@@ -3,155 +3,7 @@
 @import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
-  nb-layout-column.small {
+  .menu-sidebar ::ng-deep .scrollable {
-    flex: 0.15 !important;
+    padding-top: nb-theme(layout-padding-top);
-  }
-
-  nb-sidebar.settings-sidebar {
-    $sidebar-width: 7.5rem;
-
-    transition: width 0.3s ease;
-    width: $sidebar-width;
-    overflow: hidden;
-
-    &.collapsed {
-      width: 0;
-
-      /deep/ .main-container {
-        width: 0;
-
-        .scrollable {
-          width: $sidebar-width;
-          padding: 1.25rem;
-        }
-      }
-    }
-
-    /deep/ .main-container {
-      width: $sidebar-width;
-      background: nb-theme(color-bg);
-      transition: width 0.3s ease;
-      overflow: hidden;
-
-      .scrollable {
-        width: $sidebar-width;
-      }
-
-      @include nb-for-theme(cosmic) {
-        background: nb-theme(layout-bg);
-      }
-    }
-  }
-
-  nb-sidebar.menu-sidebar {
-
-    margin-top: nb-theme(sidebar-header-gap);
-
-    @include nb-for-theme(corporate) {
-      margin-top: 0;
-    }
-
-    /deep/ .main-container {
-      height:
-        calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
-      @include nb-ltr(border-top-right-radius, nb-theme(radius));
-      @include nb-rtl(border-top-left-radius, nb-theme(radius));
-
-      @include nb-for-theme(corporate) {
-        border: 1px solid nb-theme(separator);
-        height:
-          calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-      }
-    }
-
-    /deep/ .scrollable {
-      @include nb-for-theme(corporate) {
-        padding-top: 0;
-
-        .menu-item:first-child {
-          border-top: none;
-        }
-      }
-    }
-
-    /deep/ nb-sidebar-header {
-      padding-bottom: 0.5rem;
-      text-align: center;
-    }
-
-    background: transparent;
-
-    .main-btn {
-      padding: 0.75rem 2.5rem;
-      margin-top: -2rem;
-      font-weight: bold;
-      transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
-
-      @include nb-for-theme(corporate) {
-        border-radius: nb-theme(radius);
-      }
-
-      i {
-        font-size: 2rem;
-        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-      }
-      span {
-        @include nb-ltr(padding-left, 0.25rem);
-        @include nb-rtl(padding-right, 0.25rem);
-      }
-
-      i, span {
-        vertical-align: middle;
-      }
-    }
-
-    &.compacted {
-
-      /deep/ nb-sidebar-header {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      .main-btn {
-        width: 46px;
-        height: 44px;
-        padding: 0.375rem;
-        border-radius: 5px;
-        transition: none;
-
-        span {
-          display: none;
-        }
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    .main-content {
-      padding: 0.75rem !important;
-
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-
-    nb-sidebar.menu-sidebar {
-
-      margin-top: 0;
-
-      /deep/ .main-container {
-        height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-        @include nb-ltr(border-top-right-radius, 0);
-        @include nb-rtl(border-top-left-radius, 0);
-
-        .scrollable {
-          padding-top: 0;
-        }
-      }
-    }
-
-    .main-btn {
-      display: none;
-    }
   }
 }

src/app/@theme/layouts/three-columns/three-columns.layout.ts

@@ -1,23 +1,15 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators';
 
-// TODO: move layouts into the framework
 @Component({
   selector: 'ngx-three-columns-layout',
   styleUrls: ['./three-columns.layout.scss'],
   template: `
-    <nb-layout>
+    <nb-layout windowMode>
       <nb-layout-header fixed>
         <ngx-header></ngx-header>
       </nb-layout-header>
 
-      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
+      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
-        <nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
-          <a href="#" class="btn btn-hero-success main-btn">
-            <i class="ion ion-social-github"></i> <span>Support Us</span>
-          </a>
-        </nb-sidebar-header>
         <ng-content select="nb-menu"></ng-content>
       </nb-sidebar>
 
@@ -37,21 +29,4 @@ import { takeWhile } from 'rxjs/operators';
     </nb-layout>
   `,
 })
-export class ThreeColumnsLayoutComponent implements OnDestroy {
+export class ThreeColumnsLayoutComponent {}
-
-  private alive = true;
-
-  currentTheme: string;
-
-  constructor(protected themeService: NbThemeService) {
-    this.themeService.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(theme => {
-        this.currentTheme = theme.name;
-    });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

src/app/@theme/layouts/two-columns/two-columns.layout.scss

@@ -3,156 +3,7 @@
 @import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
-  nb-layout-column.small {
+  .menu-sidebar ::ng-deep .scrollable {
-    flex: 0.15 !important;
+    padding-top: nb-theme(layout-padding-top);
-  }
-
-  nb-sidebar.settings-sidebar {
-    $sidebar-width: 7.5rem;
-
-    transition: width 0.3s ease;
-    width: $sidebar-width;
-    overflow: hidden;
-
-    &.collapsed {
-      width: 0;
-
-      /deep/ .main-container {
-        width: 0;
-
-        .scrollable {
-          width: $sidebar-width;
-          padding: 1.25rem;
-        }
-      }
-    }
-
-    /deep/ .main-container {
-      width: $sidebar-width;
-      background: nb-theme(color-bg);
-      transition: width 0.3s ease;
-      overflow: hidden;
-
-      .scrollable {
-        width: $sidebar-width;
-      }
-
-      @include nb-for-theme(cosmic) {
-        background: nb-theme(layout-bg);
-      }
-    }
-  }
-
-  nb-sidebar.menu-sidebar {
-
-    margin-top: nb-theme(sidebar-header-gap);
-
-    @include nb-for-theme(corporate) {
-      margin-top: 0;
-    }
-
-    /deep/ .main-container {
-      height:
-        calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
-      @include nb-ltr(border-top-right-radius, nb-theme(radius));
-      @include nb-rtl(border-top-left-radius, nb-theme(radius));
-
-      @include nb-for-theme(corporate) {
-        border: 1px solid nb-theme(separator);
-        height:
-          calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-
-      }
-    }
-
-    /deep/ .scrollable {
-      @include nb-for-theme(corporate) {
-        padding-top: 0;
-
-        .menu-item:first-child {
-          border-top: none;
-        }
-      }
-    }
-
-    /deep/ nb-sidebar-header {
-      padding-bottom: 0.5rem;
-      text-align: center;
-    }
-
-    background: transparent;
-
-    .main-btn {
-      padding: 0.75rem 2.5rem;
-      margin-top: -2rem;
-      font-weight: bold;
-      transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
-
-      @include nb-for-theme(corporate) {
-        border-radius: nb-theme(radius);
-      }
-
-      i {
-        font-size: 2rem;
-        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-      }
-      span {
-        @include nb-ltr(padding-left, 0.25rem);
-        @include nb-rtl(padding-right, 0.25rem);
-      }
-
-      i, span {
-        vertical-align: middle;
-      }
-    }
-
-    &.compacted {
-
-      /deep/ nb-sidebar-header {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      .main-btn {
-        width: 46px;
-        height: 44px;
-        padding: 0.375rem;
-        border-radius: 5px;
-        transition: none;
-
-        span {
-          display: none;
-        }
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    .main-content {
-      padding: 0.75rem !important;
-
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-
-    nb-sidebar.menu-sidebar {
-
-      margin-top: 0;
-
-      /deep/ .main-container {
-        height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-        @include nb-ltr(border-top-right-radius, 0);
-        @include nb-rtl(border-top-left-radius, 0);
-
-        .scrollable {
-          padding-top: 0;
-        }
-      }
-    }
-
-    .main-btn {
-      display: none;
-    }
   }
 }

src/app/@theme/layouts/two-columns/two-columns.layout.ts

@@ -1,23 +1,15 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators';
 
-// TODO: move layouts into the framework
 @Component({
   selector: 'ngx-two-columns-layout',
   styleUrls: ['./two-columns.layout.scss'],
   template: `
-    <nb-layout>
+    <nb-layout windowMode>
       <nb-layout-header fixed>
         <ngx-header></ngx-header>
       </nb-layout-header>
 
-      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
+      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
-        <nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
-          <a href="#" class="btn btn-hero-success main-btn">
-            <i class="ion ion-social-github"></i> <span>Support Us</span>
-          </a>
-        </nb-sidebar-header>
         <ng-content select="nb-menu"></ng-content>
       </nb-sidebar>
 
@@ -35,21 +27,4 @@ import { takeWhile } from 'rxjs/operators';
     </nb-layout>
   `,
 })
-export class TwoColumnsLayoutComponent implements OnDestroy {
+export class TwoColumnsLayoutComponent {}
-
-  private alive = true;
-
-  currentTheme: string;
-
-  constructor(protected themeService: NbThemeService) {
-    this.themeService.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(theme => {
-        this.currentTheme = theme.name;
-    });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

src/app/@theme/pipes/eva-icons.pipe.ts

@@ -1,50 +0,0 @@
-/**
- * @license
- * Copyright Akveo. All Rights Reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- */
-
-import { DomSanitizer } from '@angular/platform-browser';
-import { Pipe, PipeTransform } from '@angular/core';
-import { icons } from 'eva-icons';
-
-@Pipe({ name: 'eva' })
-export class EvaIconsPipe implements PipeTransform {
-
-  private defaultOptions = {
-    height: 24,
-    width: 24,
-    fill: 'inherit',
-    animationHover: true,
-    animationInfinity: false,
-  };
-
-  constructor(private sanitizer: DomSanitizer) {}
-
-  transform(icon: string,
-            options: {
-              height: number;
-              width: number;
-              fill: string;
-              animationType?: string;
-              animationHover?: boolean;
-              animationInfinity?: boolean;
-            },
-  ) {
-    const mergedOptions = {
-      ...this.defaultOptions,
-      ...options,
-    };
-    const { width, height, fill, animationType, animationHover, animationInfinity } = mergedOptions;
-    const animation = animationType ?
-      { type: animationType, hover: animationHover, infinite: animationInfinity } :
-      null;
-
-    return this.sanitizer.bypassSecurityTrustHtml(icons[icon].toSvg({
-      width,
-      height,
-      fill,
-      animation,
-    }));
-  }
-}

src/app/@theme/pipes/index.ts

@@ -3,4 +3,3 @@ export * from './plural.pipe';
 export * from './round.pipe';
 export * from './timing.pipe';
 export * from './number-with-commas.pipe';
-export * from './eva-icons.pipe';

src/app/@theme/styles/_layout.scss

@@ -0,0 +1,8 @@
+@mixin ngx-layout() {
+  @include media-breakpoint-down(is) {
+    .row {
+      margin-left: -10px;
+      margin-right: -10px;
+    }
+  }
+}

src/app/@theme/styles/_overrides.scss

@@ -0,0 +1,11 @@
+@import './themes';
+
+@mixin nb-overrides() {
+  nb-select.size-medium button {
+    padding: 0.4375rem 2.2rem 0.4375rem 1.125rem !important;
+
+    nb-icon {
+      right: 0.41rem !important;
+    }
+  }
+}

src/app/@theme/styles/bootstrap-rtl.scss

@@ -1,193 +0,0 @@
-@import './themes';
-
-@mixin bootstrap-rtl() {
-  .btn-group:not(.btn-divided-group) > .btn:not(.dropdown-toggle) {
-    &:first-child {
-      @include nb-ltr() {
-        border-top-left-radius: nb-theme(btn-border-radius);
-        border-bottom-left-radius: nb-theme(btn-border-radius);
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      };
-      @include nb-rtl() {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        border-top-right-radius: nb-theme(btn-border-radius);
-        border-bottom-right-radius: nb-theme(btn-border-radius);
-      };
-    }
-    &:last-child {
-      @include nb-ltr() {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        border-top-right-radius: nb-theme(btn-border-radius);
-        border-bottom-right-radius: nb-theme(btn-border-radius);
-      };
-      @include nb-rtl() {
-        border-top-left-radius: nb-theme(btn-border-radius);
-        border-bottom-left-radius: nb-theme(btn-border-radius);
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      };
-    }
-  }
-
-  .btn-group.dropdown {
-    & > .btn:first-of-type.dropdown-toggle {
-      @include nb-ltr() {
-        border-top-left-radius: nb-theme(btn-border-radius);
-        border-top-right-radius: 0;
-      };
-      @include nb-rtl() {
-        border-top-left-radius: 0;
-        border-top-right-radius: nb-theme(btn-border-radius);
-      };
-    }
-    & > .btn:last-of-type.dropdown-toggle {
-      @include nb-ltr() {
-        border-top-left-radius: 0;
-        border-top-right-radius: nb-theme(btn-border-radius);
-      };
-      @include nb-rtl() {
-        border-top-left-radius: nb-theme(btn-border-radius);
-        border-top-right-radius: 0;
-      };
-    }
-
-    &:not(.show) {
-      & > .btn:first-of-type.dropdown-toggle {
-        @include nb-ltr() {
-          border-bottom-left-radius: nb-theme(btn-border-radius);
-          border-bottom-right-radius: 0;
-        };
-        @include nb-rtl() {
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: nb-theme(btn-border-radius);
-        };
-      }
-      & > .btn:last-of-type.dropdown-toggle {
-        @include nb-ltr() {
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: nb-theme(btn-border-radius);
-        };
-        @include nb-rtl() {
-          border-bottom-left-radius: nb-theme(btn-border-radius);
-          border-bottom-right-radius: 0;
-        };
-      }
-    }
-  }
-
-  .btn-group.dropup {
-    & > .btn:first-of-type.dropdown-toggle {
-      @include nb-ltr() {
-        border-bottom-left-radius: nb-theme(btn-border-radius);
-        border-bottom-right-radius: 0;
-      };
-      @include nb-rtl() {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: nb-theme(btn-border-radius);
-      };
-    }
-    & > .btn:last-of-type.dropdown-toggle {
-      @include nb-ltr() {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: nb-theme(btn-border-radius);
-      };
-      @include nb-rtl() {
-        border-bottom-left-radius: nb-theme(btn-border-radius);
-        border-bottom-right-radius: 0;
-      };
-    }
-
-    &:not(.show) {
-      & > .btn:first-of-type.dropdown-toggle {
-        @include nb-ltr() {
-          border-top-left-radius: nb-theme(btn-border-radius);
-          border-top-right-radius: 0;
-        };
-        @include nb-rtl() {
-          border-top-left-radius: 0;
-          border-top-right-radius: nb-theme(btn-border-radius);
-        };
-      }
-      & > .btn:last-of-type.dropdown-toggle {
-        @include nb-ltr() {
-          border-top-left-radius: 0;
-          border-top-right-radius: nb-theme(btn-border-radius);
-        };
-        @include nb-rtl() {
-          border-top-left-radius: nb-theme(btn-border-radius);
-          border-top-right-radius: 0;
-        };
-      }
-    }
-  }
-
-  .btn-divided-group {
-    .btn:not(:first-child) {
-      @include nb-ltr(margin-left, 0.5rem);
-      @include nb-rtl(margin-right, 0.5rem);
-      border-radius: nb-theme(btn-border-radius);
-    }
-  }
-
-  .input-group-addon,
-  .input-group-icon {
-    @include nb-ltr() {
-      border-left: nb-theme(form-control-border);
-      border-right: none;
-    };
-    @include nb-rtl() {
-      border-left: none;
-      border-right: nb-theme(form-control-border);
-    };
-  }
-
-  .input-group {
-    .form-control:first-child:not(:only-child),
-    .input-group-addon:first-child,
-    .input-group-prepend .btn:first-child,
-    .input-group-btn .btn:first-child {
-      @include nb-ltr() {
-        border-top-left-radius: nb-theme(form-control-border-radius);
-        border-bottom-left-radius: nb-theme(form-control-border-radius);
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      };
-      @include nb-rtl() {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        border-top-right-radius: nb-theme(form-control-border-radius);
-        border-bottom-right-radius: nb-theme(form-control-border-radius);
-      };
-    }
-    .form-control:last-child:not(:only-child),
-    .input-group-addon:last-child,
-    .input-group-append .btn:last-child,
-    .input-group-btn .btn:last-child {
-      @include nb-ltr() {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        border-top-right-radius: nb-theme(form-control-border-radius);
-        border-bottom-right-radius: nb-theme(form-control-border-radius);
-      };
-      @include nb-rtl() {
-        border-top-left-radius: nb-theme(form-control-border-radius);
-        border-bottom-left-radius: nb-theme(form-control-border-radius);
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      };
-    }
-
-    .dropdown.show .btn.dropdown-toggle {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    .dropup.show .btn.dropdown-toggle {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-  }
-}

src/app/@theme/styles/font-size.scss

@@ -1,3 +0,0 @@
-html {
-  font-size: 14px;
-}

src/app/@theme/styles/pace.theme.scss

@@ -7,16 +7,14 @@
  @mixin ngx-pace-theme() {
 
   .pace .pace-progress {
-    background: nb-theme(color-fg-highlight);
+    background: nb-theme(color-primary-default);
   }
 
   .pace .pace-progress-inner {
-    box-shadow: 0 0 10px nb-theme(color-fg-highlight), 0 0 5px nb-theme(color-fg-highlight);
+    box-shadow: 0 0 10px nb-theme(color-primary-default), 0 0 5px nb-theme(color-primary-default);
   }
 
   .pace .pace-activity {
     display: none;
-    // border-top-color: nb-theme(color-fg-highlight);
-    // border-left-color: nb-theme(color-fg-highlight);
   }
 }

src/app/@theme/styles/styles.scss

@@ -1,19 +1,22 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
+
 // themes - our custom or/and out of the box themes
 @import 'themes';
 
 // framework component themes (styles tied to theme variables)
 @import '~@nebular/theme/styles/globals';
 @import '~@nebular/auth/styles/all';
-@import '~@nebular/bootstrap/styles/globals';
-// ...
 
-// global app font size
+@import '~bootstrap/scss/functions';
-@import './font-size';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/grid';
 
 // loading progress bar theme
 @import './pace.theme';
 
-@import './bootstrap-rtl';
+@import './layout';
+@import './overrides';
 
 // install the framework and custom global styles
 @include nb-install() {
@@ -21,14 +24,10 @@
   // framework global styles
   @include nb-theme-global();
   @include nb-auth-global();
-  @include nb-bootstrap-global();
 
+  @include ngx-layout();
   // loading progress bar
   @include ngx-pace-theme();
 
-  // fixed in rc.9 and can be removed after upgrade
+  @include nb-overrides();
-  .custom-control .custom-control-indicator {
-    border-radius: 50%; // TODO: quickfix for https://github.com/akveo/nebular/issues/275
-  }
-  @include bootstrap-rtl();
 };

src/app/@theme/styles/theme.corporate.ts

@@ -1,179 +1,184 @@
+import { NbJSThemeOptions, CORPORATE_THEME as baseTheme } from '@nebular/theme';
+
+const baseThemeVariables = baseTheme.variables;
+
 export const CORPORATE_THEME = {
   name: 'corporate',
-  base: 'default',
+  base: 'corporate',
   variables: {
-    temperature: [
+    temperature: {
-      '#ffa36b',
+      arcFill: [ '#ffa36b', '#ffa36b', '#ff9e7a', '#ff9888', '#ff8ea0' ],
-      '#ffa36b',
+      arcEmpty: baseThemeVariables.bg2,
-      '#ff9e7a',
+      thumbBg: baseThemeVariables.bg2,
-      '#ff9888',
+      thumbBorder: '#ffa36b',
-      '#ff8ea0',
+    },
-    ],
 
     solar: {
-      gradientLeft: '#ff8ea0',
+      gradientLeft: baseThemeVariables.primary,
-      gradientRight: '#ffa36b',
+      gradientRight: baseThemeVariables.primary,
       shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
       radius: ['80%', '90%'],
     },
 
     traffic: {
-      colorBlack: '#ffffff',
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBg: '#eef2f5',
+      tooltipBorderColor: baseThemeVariables.border2,
-      tooltipBorderColor: '#eef2f5',
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: '#2a2a2a',
+      tooltipTextColor: baseThemeVariables.fgText,
-      tooltipFontWeight: '400',
+      tooltipFontWeight: 'normal',
 
-      lineBg: '#cae6f3',
+      yAxisSplitLine: 'rgba(0, 0, 0, 0)',
+
+      lineBg: baseThemeVariables.primary,
       lineShadowBlur: '0',
-      itemColor: '#bcc3cc',
+      itemColor: baseThemeVariables.border4,
-      itemBorderColor: '#bcc3cc',
+      itemBorderColor: baseThemeVariables.border4,
-      itemEmphasisBorderColor: '#74a2ff',
+      itemEmphasisBorderColor: baseThemeVariables.primaryLight,
       shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
       shadowLineShadow: 'rgba(0, 0, 0, 0)',
-      gradFrom: '#ffffff',
+      gradFrom: baseThemeVariables.bg,
-      gradTo: '#ffffff',
+      gradTo: baseThemeVariables.bg,
     },
 
     electricity: {
-      tooltipBg: '#edf0f4',
+      tooltipBg: baseThemeVariables.bg,
-      tooltipLineColor: '#bdc4cd',
+      tooltipLineColor: baseThemeVariables.fgText,
       tooltipLineWidth: '0',
-      tooltipBorderColor: '#ebeef2',
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#2a2a2a',
+      tooltipTextColor: baseThemeVariables.fgText,
-      tooltipFontWeight: 'bolder',
+      tooltipFontWeight: 'normal',
 
-      axisLineColor: 'rgba(0, 0, 0, 0)',
+      axisLineColor: baseThemeVariables.border3,
-      xAxisTextColor: '#2a2a2a',
+      xAxisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: '#ebeef2',
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: '#73a1ff',
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'solid',
       lineWidth: '4',
-      lineGradFrom: '#bdc4cd',
+      lineGradFrom: baseThemeVariables.primary,
-      lineGradTo: '#c0c8d1',
+      lineGradTo: baseThemeVariables.primary,
       lineShadow: 'rgba(0, 0, 0, 0)',
 
-      areaGradFrom: 'rgba(255, 255, 255, 0)',
+      areaGradFrom: 'rgba(0, 0, 0, 0)',
-      areaGradTo: 'rgba(255, 255, 255, 0)',
+      areaGradTo: 'rgba(0, 0, 0, 0)',
-      shadowLineDarkBg: 'rgba(255, 255, 255, 0)',
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
     },
 
     bubbleMap: {
-      titleColor: '#484848',
+      titleColor: baseThemeVariables.fgText,
-      areaColor: '#dddddd',
+      areaColor: baseThemeVariables.bg4,
-      areaHoverColor: '#cccccc',
+      areaHoverColor: baseThemeVariables.fgHighlight,
-      areaBorderColor: '#ebeef2',
+      areaBorderColor: baseThemeVariables.border5,
     },
 
     profitBarAnimationEchart: {
-      textColor: '#b2bac2',
+      textColor: baseThemeVariables.fgText,
 
-      firstAnimationBarColor: '#719efc',
+      firstAnimationBarColor: baseThemeVariables.primary,
-      secondAnimationBarColor: '#5dcfe3',
+      secondAnimationBarColor: baseThemeVariables.success,
 
-      splitLineStyleOpacity: '0.06',
+      splitLineStyleOpacity: '1',
       splitLineStyleWidth: '1',
-      splitLineStyleColor: '#000000',
+      splitLineStyleColor: baseThemeVariables.separator,
 
-      tooltipTextColor: '#2a2a2a',
+      tooltipTextColor: baseThemeVariables.fgText,
-      tooltipFontWeight: '400',
+      tooltipFontWeight: 'normal',
       tooltipFontSize: '16',
-      tooltipBg: '#eef2f5',
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: '#eef2f5',
+      tooltipBorderColor: baseThemeVariables.border2,
-      tooltipBorderWidth: '3',
+      tooltipBorderWidth: '1',
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
     },
 
     trafficBarEchart: {
-      gradientFrom: '#ff8ea0',
+      gradientFrom: baseThemeVariables.warningLight,
-      gradientTo: '#ffa36b',
+      gradientTo: baseThemeVariables.warning,
-      shadow: 'rgba(0, 0, 0, 0)',
+      shadow: baseThemeVariables.warningLight,
       shadowBlur: '0',
 
-      axisTextColor: '#b2bac2',
+      axisTextColor: baseThemeVariables.fgText,
       axisFontSize: '12',
 
-      tooltipBg: '#edf0f4',
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: '#ebeef2',
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#2a2a2a',
+      tooltipTextColor: baseThemeVariables.fgText,
-      tooltipFontWeight: 'bolder',
+      tooltipFontWeight: 'normal',
     },
 
     countryOrders: {
-      countryBorderColor: 'rgba(255, 255, 255, 1)',
+      countryBorderColor: baseThemeVariables.border4,
-      countryFillColor: 'rgba(236, 242, 245, 1)',
+      countryFillColor: baseThemeVariables.bg4,
       countryBorderWidth: '1',
-      hoveredCountryBorderColor: 'rgba(113, 158, 252, 1)',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
-      hoveredCountryFillColor: 'rgba(199, 216, 247, 1)',
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
-      hoveredCountryBorderWidth: '3',
+      hoveredCountryBorderWidth: '1',
 
-      chartAxisLineColor: 'rgba(0, 0, 0, 0)',
+      chartAxisLineColor: baseThemeVariables.border4,
-      chartAxisTextColor: '#b2bac2',
+      chartAxisTextColor: baseThemeVariables.fg,
       chartAxisFontSize: '16',
-      chartGradientTo: 'rgba(113, 158, 252, 1)',
+      chartGradientTo: baseThemeVariables.primary,
-      chartGradientFrom: 'rgba(113, 158, 252, 1)',
+      chartGradientFrom: baseThemeVariables.primaryLight,
-      chartAxisSplitLine: '#ebeef2',
+      chartAxisSplitLine: baseThemeVariables.separator,
-      chartShadowLineColor: '#2f296b',
+      chartShadowLineColor: baseThemeVariables.primaryLight,
 
-      chartLineBottomShadowColor: 'rgba(113, 158, 252, 1)',
+      chartLineBottomShadowColor: baseThemeVariables.primary,
 
-      chartInnerLineColor: '#eceff4',
+      chartInnerLineColor: baseThemeVariables.bg2,
     },
 
     echarts: {
-      bg: '#ffffff',
+      bg: baseThemeVariables.bg,
-      textColor: '#484848',
+      textColor: baseThemeVariables.fgText,
-      axisLineColor: '#bbbbbb',
+      axisLineColor: baseThemeVariables.fgText,
-      splitLineColor: '#ebeef2',
+      splitLineColor: baseThemeVariables.separator,
       itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
-      tooltipBackgroundColor: '#6a7985',
+      tooltipBackgroundColor: baseThemeVariables.primary,
       areaOpacity: '0.7',
     },
 
     chartjs: {
-      axisLineColor: '#cccccc',
+      axisLineColor: baseThemeVariables.separator,
-      textColor: '#484848',
+      textColor: baseThemeVariables.fgText,
     },
 
     orders: {
-      tooltipBg: '#ffffff',
+      tooltipBg: baseThemeVariables.bg,
       tooltipLineColor: 'rgba(0, 0, 0, 0)',
       tooltipLineWidth: '0',
-      tooltipBorderColor: '#ebeef2',
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#2a2a2a',
+      tooltipTextColor: baseThemeVariables.fgText,
-      tooltipFontWeight: 'bolder',
+      tooltipFontWeight: 'normal',
       tooltipFontSize: '20',
 
-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      axisLineColor: baseThemeVariables.border4,
       axisFontSize: '16',
-      axisTextColor: '#b2bac2',
+      axisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: '#73a1ff',
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'solid',
       lineWidth: '4',
 
       // first line
-      firstAreaGradFrom: 'rgba(227, 236, 254, 0.7)',
+      firstAreaGradFrom: baseThemeVariables.bg3,
-      firstAreaGradTo: 'rgba(227, 236, 254, 0.7)',
+      firstAreaGradTo: baseThemeVariables.bg3,
       firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
 
       // second line
-      secondLineGradFrom: 'rgba(93, 207, 227, 1)',
+      secondLineGradFrom: baseThemeVariables.primary,
-      secondLineGradTo: 'rgba(93, 207, 227, 1)',
+      secondLineGradTo: baseThemeVariables.primary,
 
       secondAreaGradFrom: 'rgba(0, 0, 0, 0)',
       secondAreaGradTo: 'rgba(0, 0, 0, 0)',
       secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
 
       // third line
-      thirdLineGradFrom: 'rgba(113, 158, 252, 1)',
+      thirdLineGradFrom: baseThemeVariables.success,
-      thirdLineGradTo: 'rgba(113, 158, 252, 1)',
+      thirdLineGradTo: baseThemeVariables.successLight,
 
       thirdAreaGradFrom: 'rgba(0, 0, 0, 0)',
       thirdAreaGradTo: 'rgba(0, 0, 0, 0)',
@@ -181,92 +186,91 @@ export const CORPORATE_THEME = {
     },
 
     profit: {
-      bg: '#ffffff',
+      bg: baseThemeVariables.bg,
-      textColor: '#ffffff',
+      textColor: baseThemeVariables.fgText,
-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      axisLineColor: baseThemeVariables.border4,
-      splitLineColor: 'rgba(161, 161 ,229, 0.2)',
+      splitLineColor: baseThemeVariables.separator,
       areaOpacity: '1',
 
       axisFontSize: '16',
-      axisTextColor: '#b2bac2',
+      axisTextColor: baseThemeVariables.fg,
 
       // first bar
-      firstLineGradFrom: '#719efc',
+      firstLineGradFrom: baseThemeVariables.bg3,
-      firstLineGradTo: '#719efc',
+      firstLineGradTo: baseThemeVariables.bg3,
-      firstLineShadow: 'rgba(14, 16, 48, 0.4)',
+      firstLineShadow: 'rgba(0, 0, 0, 0)',
 
       // second bar
-      secondLineGradFrom: '#5dcfe3',
+      secondLineGradFrom: baseThemeVariables.primary,
-      secondLineGradTo: '#5dcfe3',
+      secondLineGradTo: baseThemeVariables.primary,
-      secondLineShadow: 'rgba(14, 16, 48, 0.4)',
+      secondLineShadow: 'rgba(0, 0, 0, 0)',
 
       // third bar
-      thirdLineGradFrom: '#e3ecfe',
+      thirdLineGradFrom: baseThemeVariables.success,
-      thirdLineGradTo: '#e3ecfe',
+      thirdLineGradTo: baseThemeVariables.success,
-      thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
     },
 
     orderProfitLegend: {
-      firstItem: '#719efc',
+      firstItem: baseThemeVariables.success,
-      secondItem: '#5dcfe3',
+      secondItem: baseThemeVariables.primary,
-      thirdItem: '#e3ecfe',
+      thirdItem: baseThemeVariables.bg3,
     },
 
     visitors: {
-      tooltipBg: '#ffffff',
+      tooltipBg: baseThemeVariables.bg,
       tooltipLineColor: 'rgba(0, 0, 0, 0)',
-      tooltipLineWidth: '0',
+      tooltipLineWidth: '1',
-      tooltipBorderColor: '#ebeef2',
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#2a2a2a',
+      tooltipTextColor: baseThemeVariables.fgText,
-      tooltipFontWeight: 'bolder',
+      tooltipFontWeight: 'normal',
       tooltipFontSize: '20',
 
-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      axisLineColor: baseThemeVariables.border4,
       axisFontSize: '16',
-      axisTextColor: '#b2bac2',
+      axisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: '#73a1ff',
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'dotted',
       lineWidth: '6',
-      lineGradFrom: '#73a1ff',
+      lineGradFrom: '#ffffff',
-      lineGradTo: '#73a1ff',
+      lineGradTo: '#ffffff',
       lineShadow: 'rgba(0, 0, 0, 0)',
 
-      areaGradFrom: 'rgba(146, 181, 252, 1)',
+      areaGradFrom: baseThemeVariables.primary,
-      areaGradTo: 'rgba(146, 181, 252, 1)',
+      areaGradTo: baseThemeVariables.primaryLight,
-      shadowLineDarkBg: '#a695ff',
 
       innerLineStyle: 'solid',
       innerLineWidth: '1',
 
-      innerAreaGradFrom: 'rgba(227, 236, 254, 1)',
+      innerAreaGradFrom: baseThemeVariables.success,
-      innerAreaGradTo: 'rgba(227, 236, 254, 1)',
+      innerAreaGradTo: baseThemeVariables.success,
     },
 
     visitorsLegend: {
-      firstIcon: '#e3ecfe',
+      firstIcon: baseThemeVariables.success,
-      secondIcon: '#719efc',
+      secondIcon: baseThemeVariables.primary,
     },
 
     visitorsPie: {
-      firstPieGradientLeft: '#94e2ed',
+      firstPieGradientLeft: baseThemeVariables.success,
-      firstPieGradientRight: '#94e2ed',
+      firstPieGradientRight: baseThemeVariables.success,
       firstPieShadowColor: 'rgba(0, 0, 0, 0)',
       firstPieRadius: ['65%', '90%'],
 
-      secondPieGradientLeft: '#719efc',
+      secondPieGradientLeft: baseThemeVariables.warning,
-      secondPieGradientRight: '#719efc',
+      secondPieGradientRight: baseThemeVariables.warningLight,
-      secondPieShadowColor: '#b2cafb',
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
       secondPieRadius: ['63%', '92%'],
       shadowOffsetX: '-4',
       shadowOffsetY: '-4',
     },
 
     visitorsPieLegend: {
-      firstSection: '#719efc',
+      firstSection: baseThemeVariables.warning,
-      secondSection: '#99e5ee',
+      secondSection: baseThemeVariables.success,
     },
 
     earningPie: {
@@ -275,30 +279,30 @@ export const CORPORATE_THEME = {
 
       fontSize: '22',
 
-      firstPieGradientLeft: '#719efc',
+      firstPieGradientLeft: baseThemeVariables.success,
-      firstPieGradientRight: '#719efc',
+      firstPieGradientRight: baseThemeVariables.success,
       firstPieShadowColor: 'rgba(0, 0, 0, 0)',
 
-      secondPieGradientLeft: '#ff9f6f',
+      secondPieGradientLeft: baseThemeVariables.primary,
-      secondPieGradientRight: '#ff9f6f',
+      secondPieGradientRight: baseThemeVariables.primary,
       secondPieShadowColor: 'rgba(0, 0, 0, 0)',
 
-      thirdPieGradientLeft: '#ff5e83',
+      thirdPieGradientLeft: baseThemeVariables.warning,
-      thirdPieGradientRight: '#ff5e83',
+      thirdPieGradientRight: baseThemeVariables.warning,
       thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
     },
 
     earningLine: {
-      gradFrom: '#e3ecfe',
+      gradFrom: baseThemeVariables.primary,
-      gradTo: '#e3ecfe',
+      gradTo: baseThemeVariables.primary,
 
-      tooltipTextColor: '#2a2a2a',
+      tooltipTextColor: baseThemeVariables.fgText,
-      tooltipFontWeight: '400',
+      tooltipFontWeight: 'normal',
       tooltipFontSize: '16',
-      tooltipBg: '#eef2f5',
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: '#eef2f5',
+      tooltipBorderColor: baseThemeVariables.border2,
-      tooltipBorderWidth: '3',
+      tooltipBorderWidth: '1',
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
     },
   },
-};
+} as NbJSThemeOptions;

src/app/@theme/styles/theme.cosmic.ts

@@ -1,272 +1,276 @@
+import { NbJSThemeOptions, COSMIC_THEME as baseTheme } from '@nebular/theme';
+
+const baseThemeVariables = baseTheme.variables;
+
 export const COSMIC_THEME = {
   name: 'cosmic',
-  base: 'default',
+  base: 'cosmic',
   variables: {
-
+    temperature: {
-    temperature: [
+      arcFill: [ '#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59' ],
-      '#2ec7fe',
+      arcEmpty: baseThemeVariables.bg2,
-      '#31ffad',
+      thumbBg: '#ffffff',
-      '#7bff24',
+      thumbBorder: '#ffffff',
-      '#fff024',
+    },
-      '#f7bd59',
-    ],
 
     solar: {
-      gradientLeft: '#7bff24',
+      gradientLeft: baseThemeVariables.primary,
-      gradientRight: '#2ec7fe',
+      gradientRight: baseThemeVariables.primary,
-      shadowColor: '#19977E',
+      shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
       radius: ['70%', '90%'],
     },
 
     traffic: {
-      colorBlack: '#000000',
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBg: 'rgba(0, 255, 170, 0.35)',
+      tooltipBorderColor: baseThemeVariables.border2,
-      tooltipBorderColor: '#00d977',
+      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(50, 50, 89); border-radius: 10px; padding: 4px 16px;',
-      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
-      tooltipTextColor: '#ffffff',
       tooltipFontWeight: 'normal',
 
-      lineBg: '#d1d1ff',
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      lineBg: baseThemeVariables.border2,
       lineShadowBlur: '14',
-      itemColor: '#BEBBFF',
+      itemColor: baseThemeVariables.border2,
-      itemBorderColor: '#ffffff',
+      itemBorderColor: baseThemeVariables.border2,
-      itemEmphasisBorderColor: '#ffffff',
+      itemEmphasisBorderColor: baseThemeVariables.primary,
-      shadowLineDarkBg: '#655ABD',
+      shadowLineDarkBg: baseThemeVariables.border3,
-      shadowLineShadow: 'rgba(33, 7, 77, 0.5)',
+      shadowLineShadow: baseThemeVariables.border3,
-      gradFrom: 'rgba(118, 89, 255, 0.4)',
+      gradFrom: baseThemeVariables.bg,
-      gradTo: 'rgba(164, 84, 255, 0.5)',
+      gradTo: baseThemeVariables.bg2,
     },
 
     electricity: {
-      tooltipBg: 'rgba(0, 255, 170, 0.35)',
+      tooltipBg: baseThemeVariables.bg,
-      tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
+      tooltipLineColor: baseThemeVariables.fgText,
-      tooltipLineWidth: '1',
+      tooltipLineWidth: '0',
-      tooltipBorderColor: '#00d977',
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#ffffff',
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
 
-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      axisLineColor: baseThemeVariables.border3,
-      xAxisTextColor: '#a1a1e5',
+      xAxisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: '#ffffff',
+      itemBorderColor: baseThemeVariables.border2,
       lineStyle: 'dotted',
       lineWidth: '6',
-      lineGradFrom: '#00ffaa',
+      lineGradFrom: baseThemeVariables.success,
-      lineGradTo: '#fff835',
+      lineGradTo: baseThemeVariables.warning,
-      lineShadow: 'rgba(14, 16, 48, 0.4)',
+      lineShadow: baseThemeVariables.bg4,
 
-      areaGradFrom: 'rgba(188, 92, 255, 0.5)',
+      areaGradFrom: baseThemeVariables.bg2,
-      areaGradTo: 'rgba(188, 92, 255, 0)',
+      areaGradTo: baseThemeVariables.bg3,
-      shadowLineDarkBg: '#a695ff',
+      shadowLineDarkBg: baseThemeVariables.bg3,
     },
 
     bubbleMap: {
-      titleColor: '#ffffff',
+      titleColor: baseThemeVariables.fgText,
-      areaColor: '#2c2961',
+      areaColor: baseThemeVariables.bg4,
-      areaHoverColor: '#a1a1e5',
+      areaHoverColor: baseThemeVariables.fgHighlight,
-      areaBorderColor: '#654ddb',
+      areaBorderColor: baseThemeVariables.border5,
     },
 
     profitBarAnimationEchart: {
-      textColor: '#ffffff',
+      textColor: baseThemeVariables.fgText,
 
-      firstAnimationBarColor: '#0088ff',
+      firstAnimationBarColor: baseThemeVariables.primary,
-      secondAnimationBarColor: '#7659ff',
+      secondAnimationBarColor: baseThemeVariables.success,
 
-      splitLineStyleOpacity: '0.06',
+      splitLineStyleOpacity: '1',
       splitLineStyleWidth: '1',
-      splitLineStyleColor: '#000000',
+      splitLineStyleColor: baseThemeVariables.border2,
 
-      tooltipTextColor: '#ffffff',
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '16',
-      tooltipBg: 'rgba(0, 255, 170, 0.35)',
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: '#00d977',
+      tooltipBorderColor: baseThemeVariables.border2,
-      tooltipBorderWidth: '3',
+      tooltipBorderWidth: '1',
-      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
     },
 
     trafficBarEchart: {
-      gradientFrom: '#fc0',
+      gradientFrom: baseThemeVariables.warningLight,
-      gradientTo: '#ffa100',
+      gradientTo: baseThemeVariables.warning,
-      shadow: '#ffb600',
+      shadow: baseThemeVariables.warningLight,
       shadowBlur: '5',
 
-      axisTextColor: '#a1a1e5',
+      axisTextColor: baseThemeVariables.fgText,
       axisFontSize: '12',
 
-      tooltipBg: 'rgba(0, 255, 170, 0.35)',
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: '#00d977',
+      tooltipBorderColor: baseThemeVariables.border2,
-      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: '#ffffff',
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
     },
 
     countryOrders: {
-      countryBorderColor: '#525dbd',
+      countryBorderColor: baseThemeVariables.border4,
-      countryFillColor: '#4f41a6',
+      countryFillColor: baseThemeVariables.bg3,
-      countryBorderWidth: '2',
+      countryBorderWidth: '1',
-      hoveredCountryBorderColor: '#00f9a6',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
-      hoveredCountryFillColor: '#377aa7',
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
-      hoveredCountryBorderWidth: '3',
+      hoveredCountryBorderWidth: '1',
 
-      chartAxisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      chartAxisLineColor: baseThemeVariables.border4,
-      chartAxisTextColor: '#a1a1e5',
+      chartAxisTextColor: baseThemeVariables.fg,
       chartAxisFontSize: '16',
-      chartGradientTo: '#00c7c7',
+      chartGradientTo: baseThemeVariables.primary,
-      chartGradientFrom: '#00d977',
+      chartGradientFrom: baseThemeVariables.primaryLight,
-      chartAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+      chartAxisSplitLine: baseThemeVariables.separator,
-      chartShadowBarColor: '#2f296b',
+      chartShadowLineColor: baseThemeVariables.primaryLight,
 
-      chartLineBottomShadowColor: '#00977e',
+      chartLineBottomShadowColor: baseThemeVariables.primary,
 
-      chartInnerLineColor: '#2f296b',
+      chartInnerLineColor: baseThemeVariables.bg2,
     },
 
     echarts: {
-      bg: '#3d3780',
+      bg: baseThemeVariables.bg,
-      textColor: '#ffffff',
+      textColor: baseThemeVariables.fgText,
-      axisLineColor: '#a1a1e5',
+      axisLineColor: baseThemeVariables.fgText,
-      splitLineColor: '#342e73',
+      splitLineColor: baseThemeVariables.separator,
       itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
-      tooltipBackgroundColor: '#6a7985',
+      tooltipBackgroundColor: baseThemeVariables.primary,
       areaOpacity: '1',
     },
 
     chartjs: {
-      axisLineColor: '#a1a1e5',
+      axisLineColor: baseThemeVariables.separator,
-      textColor: '#ffffff',
+      textColor: baseThemeVariables.fgText,
     },
 
     orders: {
-      tooltipBg: 'rgba(0, 255, 170, 0.35)',
+      tooltipBg: baseThemeVariables.bg,
-      tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
-      tooltipLineWidth: '1',
+      tooltipLineWidth: '0',
-      tooltipBorderColor: '#00d977',
+      tooltipBorderColor: baseThemeVariables.border2,
-      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#ffffff',
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '20',
 
-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      axisLineColor: baseThemeVariables.border4,
       axisFontSize: '16',
-      axisTextColor: '#a1a1e5',
+      axisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: '#ffffff',
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'solid',
       lineWidth: '4',
 
       // first line
-      firstAreaGradFrom: 'rgba(78, 64, 164, 1)',
+      firstAreaGradFrom: baseThemeVariables.bg2,
-      firstAreaGradTo: 'rgba(78, 64, 164, 1)',
+      firstAreaGradTo: baseThemeVariables.bg2,
-      firstShadowLineDarkBg: '#018dff',
+      firstShadowLineDarkBg: baseThemeVariables.bg2,
 
       // second line
-      secondLineGradFrom: '#00bece',
+      secondLineGradFrom: baseThemeVariables.primary,
-      secondLineGradTo: '#00da78',
+      secondLineGradTo: baseThemeVariables.primary,
 
-      secondAreaGradFrom: 'rgba(38, 139, 145, 0.8)',
+      secondAreaGradFrom: 'rgba(161, 110, 255, 0.8)',
-      secondAreaGradTo: 'rgba(38, 139, 145, 0.5)',
+      secondAreaGradTo: 'rgba(161, 110, 255, 0.5)',
-      secondShadowLineDarkBg: '#2c5a85',
+      secondShadowLineDarkBg: baseThemeVariables.primary,
 
       // third line
-      thirdLineGradFrom: '#8069ff',
+      thirdLineGradFrom: baseThemeVariables.success,
-      thirdLineGradTo: '#8357ff',
+      thirdLineGradTo: baseThemeVariables.successLight,
 
-      thirdAreaGradFrom: 'rgba(118, 73, 208, 0.7)',
+      thirdAreaGradFrom: 'rgba(0, 214, 143, 0.7)',
-      thirdAreaGradTo: 'rgba(188, 92, 255, 0.4)',
+      thirdAreaGradTo: 'rgba(0, 214, 143, 0.4)',
-      thirdShadowLineDarkBg: '#a695ff',
+      thirdShadowLineDarkBg: baseThemeVariables.success,
     },
 
     profit: {
-      bg: '#3d3780',
+      bg: baseThemeVariables.bg,
-      textColor: '#ffffff',
+      textColor: baseThemeVariables.fgText,
-      axisLineColor: '#a1a1e5',
+      axisLineColor: baseThemeVariables.border4,
-      splitLineColor: '#342e73',
+      splitLineColor: baseThemeVariables.separator,
       areaOpacity: '1',
 
       axisFontSize: '16',
-      axisTextColor: '#a1a1e5',
+      axisTextColor: baseThemeVariables.fg,
 
       // first bar
-      firstLineGradFrom: '#00bece',
+      firstLineGradFrom: baseThemeVariables.bg2,
-      firstLineGradTo: '#00da78',
+      firstLineGradTo: baseThemeVariables.bg2,
-      firstLineShadow: 'rgba(14, 16, 48, 0.4)',
+      firstLineShadow: 'rgba(0, 0, 0, 0)',
 
       // second bar
-      secondLineGradFrom: '#8069ff',
+      secondLineGradFrom: baseThemeVariables.primary,
-      secondLineGradTo: '#8357ff',
+      secondLineGradTo: baseThemeVariables.primary,
-      secondLineShadow: 'rgba(14, 16, 48, 0.4)',
+      secondLineShadow: 'rgba(0, 0, 0, 0)',
 
       // third bar
-      thirdLineGradFrom: '#4e40a4',
+      thirdLineGradFrom: baseThemeVariables.success,
-      thirdLineGradTo: '#4e40a4',
+      thirdLineGradTo: baseThemeVariables.successLight,
-      thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
     },
 
     orderProfitLegend: {
-      firstItem: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)',
+      firstItem: baseThemeVariables.success,
-      secondItem: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)',
+      secondItem: baseThemeVariables.primary,
-      thirdItem: '#4e40a4',
+      thirdItem: baseThemeVariables.bg2,
     },
 
     visitors: {
-      tooltipBg: 'rgba(0, 255, 170, 0.35)',
+      tooltipBg: baseThemeVariables.bg,
-      tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
       tooltipLineWidth: '1',
-      tooltipBorderColor: '#00d977',
+      tooltipBorderColor: baseThemeVariables.border2,
-      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#ffffff',
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
 
-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      axisLineColor: baseThemeVariables.border4,
       axisFontSize: '16',
-      axisTextColor: '#a1a1e5',
+      axisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: '#ffffff',
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'dotted',
       lineWidth: '6',
       lineGradFrom: '#ffffff',
       lineGradTo: '#ffffff',
-      lineShadow: 'rgba(14, 16, 48, 0.4)',
+      lineShadow: 'rgba(0, 0, 0, 0)',
 
-      areaGradFrom: 'rgba(188, 92, 255, 1)',
+      areaGradFrom: baseThemeVariables.primary,
-      areaGradTo: 'rgba(188, 92, 255, 0.5)',
+      areaGradTo: baseThemeVariables.primaryLight,
-      shadowLineDarkBg: '#a695ff',
 
       innerLineStyle: 'solid',
       innerLineWidth: '1',
 
-      innerAreaGradFrom: 'rgba(59, 165, 243, 1)',
+      innerAreaGradFrom: baseThemeVariables.success,
-      innerAreaGradTo: 'rgba(4, 133, 243 , 1)',
+      innerAreaGradTo: baseThemeVariables.success,
     },
 
     visitorsLegend: {
-      firstIcon: 'linear-gradient(90deg, #0088ff 0%, #3dafff 100%)',
+      firstIcon: baseThemeVariables.success,
-      secondIcon: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)',
+      secondIcon: baseThemeVariables.primary,
     },
 
     visitorsPie: {
-      firstPieGradientLeft: '#7bff24',
+      firstPieGradientLeft: baseThemeVariables.success,
-      firstPieGradientRight: '#2ec7fe',
+      firstPieGradientRight: baseThemeVariables.successLight,
-      firstPieShadowColor: '#19977E',
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
       firstPieRadius: ['70%', '90%'],
 
-      secondPieGradientLeft: '#ff894a',
+      secondPieGradientLeft: baseThemeVariables.warning,
-      secondPieGradientRight: '#ffcc10',
+      secondPieGradientRight: baseThemeVariables.warningLight,
-      secondPieShadowColor: '#cf7c1c',
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
       secondPieRadius: ['60%', '95%'],
       shadowOffsetX: '0',
       shadowOffsetY: '3',
     },
 
     visitorsPieLegend: {
-      firstSection: 'linear-gradient(90deg, #ffcb17 0%, #ff874c 100%)',
+      firstSection: baseThemeVariables.warning,
-      secondSection: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)',
+      secondSection: baseThemeVariables.success,
     },
 
     earningPie: {
@@ -275,30 +279,30 @@ export const COSMIC_THEME = {
 
       fontSize: '22',
 
-      firstPieGradientLeft: '#00d77f',
+      firstPieGradientLeft: baseThemeVariables.success,
-      firstPieGradientRight: '#00d77f',
+      firstPieGradientRight: baseThemeVariables.success,
       firstPieShadowColor: 'rgba(0, 0, 0, 0)',
 
-      secondPieGradientLeft: '#7756f7',
+      secondPieGradientLeft: baseThemeVariables.primary,
-      secondPieGradientRight: '#7756f7',
+      secondPieGradientRight: baseThemeVariables.primary,
       secondPieShadowColor: 'rgba(0, 0, 0, 0)',
 
-      thirdPieGradientLeft: '#ffca00',
+      thirdPieGradientLeft: baseThemeVariables.warning,
-      thirdPieGradientRight: '#ffca00',
+      thirdPieGradientRight: baseThemeVariables.warning,
       thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
     },
 
     earningLine: {
-      gradFrom: 'rgba(118, 89, 255, 0.4)',
+      gradFrom: baseThemeVariables.primary,
-      gradTo: 'rgba(164, 84, 255, 0.5)',
+      gradTo: baseThemeVariables.primary,
 
-      tooltipTextColor: '#ffffff',
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '16',
-      tooltipBg: 'rgba(0, 255, 170, 0.35)',
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: '#00d977',
+      tooltipBorderColor: baseThemeVariables.border2,
-      tooltipBorderWidth: '3',
+      tooltipBorderWidth: '1',
-      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
     },
   },
-};
+} as NbJSThemeOptions;

src/app/@theme/styles/theme.dark.ts

@@ -0,0 +1,314 @@
+import { NbJSThemeOptions, DARK_THEME as baseTheme } from '@nebular/theme';
+
+const baseThemeVariables = baseTheme.variables;
+
+export const DARK_THEME = {
+  name: 'dark',
+  base: 'dark',
+  variables: {
+    temperature: {
+      arcFill: [
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+      ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
+      thumbBorder: baseThemeVariables.primary,
+    },
+
+    solar: {
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
+      shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
+      radius: ['80%', '90%'],
+    },
+
+    traffic: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      lineBg: baseThemeVariables.border4,
+      lineShadowBlur: '1',
+      itemColor: baseThemeVariables.border4,
+      itemBorderColor: baseThemeVariables.border4,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+      shadowLineShadow: 'rgba(0, 0, 0, 0)',
+      gradFrom: baseThemeVariables.bg2,
+      gradTo: baseThemeVariables.bg2,
+    },
+
+    electricity: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: baseThemeVariables.fgText,
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+      lineGradFrom: baseThemeVariables.primary,
+      lineGradTo: baseThemeVariables.primary,
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.bg2,
+      areaGradTo: baseThemeVariables.bg2,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    bubbleMap: {
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
+    },
+
+    profitBarAnimationEchart: {
+      textColor: baseThemeVariables.fgText,
+
+      firstAnimationBarColor: baseThemeVariables.primary,
+      secondAnimationBarColor: baseThemeVariables.success,
+
+      splitLineStyleOpacity: '1',
+      splitLineStyleWidth: '1',
+      splitLineStyleColor: baseThemeVariables.separator,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+
+    trafficBarEchart: {
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
+      shadowBlur: '0',
+
+      axisTextColor: baseThemeVariables.fgText,
+      axisFontSize: '12',
+
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+    },
+
+    countryOrders: {
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg3,
+      countryBorderWidth: '1',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
+      hoveredCountryBorderWidth: '1',
+
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
+      chartAxisFontSize: '16',
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,
+
+      chartLineBottomShadowColor: baseThemeVariables.primary,
+
+      chartInnerLineColor: baseThemeVariables.bg2,
+    },
+
+    echarts: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
+      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
+      tooltipBackgroundColor: baseThemeVariables.primary,
+      areaOpacity: '0.7',
+    },
+
+    chartjs: {
+      axisLineColor: baseThemeVariables.separator,
+      textColor: baseThemeVariables.fgText,
+    },
+
+    orders: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+
+      // first line
+      firstAreaGradFrom: baseThemeVariables.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
+      firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // second line
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+
+      secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
+      secondAreaGradTo: 'rgba(51, 102, 255, 0)',
+      secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // third line
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+
+      thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
+      thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
+      thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    profit: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
+      areaOpacity: '1',
+
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+
+      // first bar
+      firstLineGradFrom: baseThemeVariables.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
+      firstLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // second bar
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+      secondLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // third bar
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
+    },
+
+    orderProfitLegend: {
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      thirdItem: baseThemeVariables.bg3,
+    },
+
+    visitors: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'dotted',
+      lineWidth: '6',
+      lineGradFrom: '#ffffff',
+      lineGradTo: '#ffffff',
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,
+
+      innerLineStyle: 'solid',
+      innerLineWidth: '1',
+
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
+    },
+
+    visitorsLegend: {
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
+    },
+
+    visitorsPie: {
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+      firstPieRadius: ['70%', '90%'],
+
+      secondPieGradientLeft: baseThemeVariables.warning,
+      secondPieGradientRight: baseThemeVariables.warningLight,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+      secondPieRadius: ['60%', '97%'],
+      shadowOffsetX: '0',
+      shadowOffsetY: '0',
+    },
+
+    visitorsPieLegend: {
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
+    },
+
+    earningPie: {
+      radius: ['65%', '100%'],
+      center: ['50%', '50%'],
+
+      fontSize: '22',
+
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
+      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
+    },
+
+    earningLine: {
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+  },
+} as NbJSThemeOptions;

src/app/@theme/styles/theme.default.ts

@@ -1,266 +1,273 @@
+import { NbJSThemeOptions, DEFAULT_THEME as baseTheme } from '@nebular/theme';
+
+const baseThemeVariables = baseTheme.variables;
+
 export const DEFAULT_THEME = {
   name: 'default',
-  base: null,
+  base: 'default',
   variables: {
-
+    temperature: {
-    // Safari fix
+      arcFill: [
-    temperature: [
+        baseThemeVariables.primary,
-      '#42db7d',
+        baseThemeVariables.primary,
-      '#42db7d',
+        baseThemeVariables.primary,
-      '#42db7d',
+        baseThemeVariables.primary,
-      '#42db7d',
+        baseThemeVariables.primary,
-      '#42db7d',
+      ],
-    ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
+      thumbBorder: baseThemeVariables.primary,
+    },
 
     solar: {
-      gradientLeft: '#42db7d',
+      gradientLeft: baseThemeVariables.primary,
-      gradientRight: '#42db7d',
+      gradientRight: baseThemeVariables.primary,
       shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
       radius: ['80%', '90%'],
     },
 
     traffic: {
-      colorBlack: '#000000',
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBg: '#ffffff',
+      tooltipBorderColor: baseThemeVariables.border2,
-      tooltipBorderColor: '#c0c8d1',
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: '#2a2a2a',
+      tooltipTextColor: baseThemeVariables.fgText,
-      tooltipFontWeight: 'bolder',
+      tooltipFontWeight: 'normal',
 
-      lineBg: '#c0c8d1',
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      lineBg: baseThemeVariables.border4,
       lineShadowBlur: '1',
-      itemColor: '#bcc3cc',
+      itemColor: baseThemeVariables.border4,
-      itemBorderColor: '#bcc3cc',
+      itemBorderColor: baseThemeVariables.border4,
-      itemEmphasisBorderColor: '#42db7d',
+      itemEmphasisBorderColor: baseThemeVariables.primary,
       shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
       shadowLineShadow: 'rgba(0, 0, 0, 0)',
-      gradFrom: '#ebeef2',
+      gradFrom: baseThemeVariables.bg2,
-      gradTo: '#ebeef2',
+      gradTo: baseThemeVariables.bg2,
     },
 
     electricity: {
-      tooltipBg: '#ffffff',
+      tooltipBg: baseThemeVariables.bg,
-      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineColor: baseThemeVariables.fgText,
       tooltipLineWidth: '0',
-      tooltipBorderColor: '#ebeef2',
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#2a2a2a',
+      tooltipTextColor: baseThemeVariables.fgText,
-      tooltipFontWeight: 'bolder',
+      tooltipFontWeight: 'normal',
 
-      axisLineColor: 'rgba(0, 0, 0, 0)',
+      axisLineColor: baseThemeVariables.border3,
-      xAxisTextColor: '#2a2a2a',
+      xAxisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: '#ebeef2',
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: '#42db7d',
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'solid',
       lineWidth: '4',
-      lineGradFrom: '#42db7d',
+      lineGradFrom: baseThemeVariables.primary,
-      lineGradTo: '#42db7d',
+      lineGradTo: baseThemeVariables.primary,
       lineShadow: 'rgba(0, 0, 0, 0)',
 
-      areaGradFrom: 'rgba(235, 238, 242, 0.5)',
+      areaGradFrom: baseThemeVariables.bg2,
-      areaGradTo: 'rgba(235, 238, 242, 0.5)',
+      areaGradTo: baseThemeVariables.bg2,
       shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
     },
 
     bubbleMap: {
-      titleColor: '#484848',
+      titleColor: baseThemeVariables.fgText,
-      areaColor: '#dddddd',
+      areaColor: baseThemeVariables.bg4,
-      areaHoverColor: '#cccccc',
+      areaHoverColor: baseThemeVariables.fgHighlight,
-      areaBorderColor: '#ebeef2',
+      areaBorderColor: baseThemeVariables.border5,
     },
 
     profitBarAnimationEchart: {
-      textColor: '#484848',
+      textColor: baseThemeVariables.fgText,
 
-      firstAnimationBarColor: '#3edd81',
+      firstAnimationBarColor: baseThemeVariables.primary,
-      secondAnimationBarColor: '#8d7fff',
+      secondAnimationBarColor: baseThemeVariables.success,
 
-      splitLineStyleOpacity: '0.06',
+      splitLineStyleOpacity: '1',
       splitLineStyleWidth: '1',
-      splitLineStyleColor: '#000000',
+      splitLineStyleColor: baseThemeVariables.separator,
 
-      tooltipTextColor: '#2a2a2a',
+      tooltipTextColor: baseThemeVariables.fgText,
-      tooltipFontWeight: 'bolder',
+      tooltipFontWeight: 'normal',
       tooltipFontSize: '16',
-      tooltipBg: '#ffffff',
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: '#c0c8d1',
+      tooltipBorderColor: baseThemeVariables.border2,
-      tooltipBorderWidth: '3',
+      tooltipBorderWidth: '1',
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
     },
 
     trafficBarEchart: {
-      gradientFrom: '#fc0',
+      gradientFrom: baseThemeVariables.warningLight,
-      gradientTo: '#ffa100',
+      gradientTo: baseThemeVariables.warning,
-      shadow: '#ffb600',
+      shadow: baseThemeVariables.warningLight,
       shadowBlur: '0',
 
-      axisTextColor: '#b2bac2',
+      axisTextColor: baseThemeVariables.fgText,
       axisFontSize: '12',
 
-      tooltipBg: '#ffffff',
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: '#c0c8d1',
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: '#2a2a2a',
+      tooltipTextColor: baseThemeVariables.fgText,
-      tooltipFontWeight: 'bolder',
+      tooltipFontWeight: 'normal',
     },
 
     countryOrders: {
-      countryBorderColor: 'rgba(255, 255, 255, 1)',
+      countryBorderColor: baseThemeVariables.border4,
-      countryFillColor: 'rgba(236, 242, 245, 1)',
+      countryFillColor: baseThemeVariables.bg3,
       countryBorderWidth: '1',
-      hoveredCountryBorderColor: '#40dc7e',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
-      hoveredCountryFillColor: '#c7f4d9',
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
-      hoveredCountryBorderWidth: '3',
+      hoveredCountryBorderWidth: '1',
 
-      chartAxisLineColor: 'rgba(0, 0, 0, 0)',
+      chartAxisLineColor: baseThemeVariables.border4,
-      chartAxisTextColor: '#b2bac2',
+      chartAxisTextColor: baseThemeVariables.fg,
       chartAxisFontSize: '16',
-      chartGradientTo: '#3edd81',
+      chartGradientTo: baseThemeVariables.primary,
-      chartGradientFrom: '#3bddaf',
+      chartGradientFrom: baseThemeVariables.primaryLight,
-      chartAxisSplitLine: '#ebeef2',
+      chartAxisSplitLine: baseThemeVariables.separator,
-      chartShadowLineColor: '#2f296b',
+      chartShadowLineColor: baseThemeVariables.primaryLight,
 
-      chartLineBottomShadowColor: '#eceff4',
+      chartLineBottomShadowColor: baseThemeVariables.primary,
 
-      chartInnerLineColor: '#eceff4',
+      chartInnerLineColor: baseThemeVariables.bg2,
     },
 
     echarts: {
-      bg: '#ffffff',
+      bg: baseThemeVariables.bg,
-      textColor: '#484848',
+      textColor: baseThemeVariables.fgText,
-      axisLineColor: '#bbbbbb',
+      axisLineColor: baseThemeVariables.fgText,
-      splitLineColor: '#ebeef2',
+      splitLineColor: baseThemeVariables.separator,
       itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
-      tooltipBackgroundColor: '#6a7985',
+      tooltipBackgroundColor: baseThemeVariables.primary,
       areaOpacity: '0.7',
     },
 
     chartjs: {
-      axisLineColor: '#cccccc',
+      axisLineColor: baseThemeVariables.separator,
-      textColor: '#484848',
+      textColor: baseThemeVariables.fgText,
     },
 
     orders: {
-      tooltipBg: '#ffffff',
+      tooltipBg: baseThemeVariables.bg,
       tooltipLineColor: 'rgba(0, 0, 0, 0)',
       tooltipLineWidth: '0',
-      tooltipBorderColor: '#ebeef2',
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#2a2a2a',
+      tooltipTextColor: baseThemeVariables.fgText,
-      tooltipFontWeight: 'bolder',
+      tooltipFontWeight: 'normal',
       tooltipFontSize: '20',
 
-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      axisLineColor: baseThemeVariables.border4,
       axisFontSize: '16',
-      axisTextColor: '#b2bac2',
+      axisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: '#42db7d',
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'solid',
       lineWidth: '4',
 
       // first line
-      firstAreaGradFrom: 'rgba(236, 242, 245, 0.8)',
+      firstAreaGradFrom: baseThemeVariables.bg3,
-      firstAreaGradTo: 'rgba(236, 242, 245, 0.8)',
+      firstAreaGradTo: baseThemeVariables.bg3,
       firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
 
       // second line
-      secondLineGradFrom: 'rgba(164, 123, 255, 1)',
+      secondLineGradFrom: baseThemeVariables.primary,
-      secondLineGradTo: 'rgba(164, 123, 255, 1)',
+      secondLineGradTo: baseThemeVariables.primary,
 
-      secondAreaGradFrom: 'rgba(188, 92, 255, 0.2)',
+      secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
-      secondAreaGradTo: 'rgba(188, 92, 255, 0)',
+      secondAreaGradTo: 'rgba(51, 102, 255, 0)',
       secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
 
       // third line
-      thirdLineGradFrom: 'rgba(55, 220, 136, 1)',
+      thirdLineGradFrom: baseThemeVariables.success,
-      thirdLineGradTo: 'rgba(55, 220, 136, 1)',
+      thirdLineGradTo: baseThemeVariables.successLight,
 
-      thirdAreaGradFrom: 'rgba(31 ,106, 124, 0.2)',
+      thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
-      thirdAreaGradTo: 'rgba(4, 126, 230, 0)',
+      thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
       thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
     },
 
-    // TODO: need design for default theme
     profit: {
-      bg: '#ffffff',
+      bg: baseThemeVariables.bg,
-      textColor: '#ffffff',
+      textColor: baseThemeVariables.fgText,
-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      axisLineColor: baseThemeVariables.border4,
-      splitLineColor: 'rgba(161, 161 ,229, 0.2)',
+      splitLineColor: baseThemeVariables.separator,
       areaOpacity: '1',
 
       axisFontSize: '16',
-      axisTextColor: '#b2bac2',
+      axisTextColor: baseThemeVariables.fg,
 
       // first bar
-      firstLineGradFrom: '#00bece',
+      firstLineGradFrom: baseThemeVariables.bg3,
-      firstLineGradTo: '#00da78',
+      firstLineGradTo: baseThemeVariables.bg3,
-      firstLineShadow: 'rgba(14, 16, 48, 0.4)',
+      firstLineShadow: 'rgba(0, 0, 0, 0)',
 
       // second bar
-      secondLineGradFrom: '#8069ff',
+      secondLineGradFrom: baseThemeVariables.primary,
-      secondLineGradTo: '#8357ff',
+      secondLineGradTo: baseThemeVariables.primary,
-      secondLineShadow: 'rgba(14, 16, 48, 0.4)',
+      secondLineShadow: 'rgba(0, 0, 0, 0)',
 
       // third bar
-      thirdLineGradFrom: 'rgba(236, 242, 245, 0.8)',
+      thirdLineGradFrom: baseThemeVariables.success,
-      thirdLineGradTo: 'rgba(236, 242, 245, 0.8)',
+      thirdLineGradTo: baseThemeVariables.successLight,
-      thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
     },
 
     orderProfitLegend: {
-      firstItem: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)',
+      firstItem: baseThemeVariables.success,
-      secondItem: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)',
+      secondItem: baseThemeVariables.primary,
-      thirdItem: 'rgba(236, 242, 245, 0.8)',
+      thirdItem: baseThemeVariables.bg3,
     },
 
     visitors: {
-      tooltipBg: '#ffffff',
+      tooltipBg: baseThemeVariables.bg,
       tooltipLineColor: 'rgba(0, 0, 0, 0)',
-      tooltipLineWidth: '0',
+      tooltipLineWidth: '1',
-      tooltipBorderColor: '#ebeef2',
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#2a2a2a',
+      tooltipTextColor: baseThemeVariables.fgText,
-      tooltipFontWeight: 'bolder',
+      tooltipFontWeight: 'normal',
       tooltipFontSize: '20',
 
-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      axisLineColor: baseThemeVariables.border4,
       axisFontSize: '16',
-      axisTextColor: '#b2bac2',
+      axisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: '#42db7d',
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'dotted',
       lineWidth: '6',
       lineGradFrom: '#ffffff',
       lineGradTo: '#ffffff',
-      lineShadow: 'rgba(14, 16, 48, 0)',
+      lineShadow: 'rgba(0, 0, 0, 0)',
 
-      areaGradFrom: 'rgba(188, 92, 255, 1)',
+      areaGradFrom: baseThemeVariables.primary,
-      areaGradTo: 'rgba(188, 92, 255, 0.5)',
+      areaGradTo: baseThemeVariables.primaryLight,
-      shadowLineDarkBg: '#a695ff',
 
       innerLineStyle: 'solid',
       innerLineWidth: '1',
 
-      innerAreaGradFrom: 'rgba(60, 221, 156, 1)',
+      innerAreaGradFrom: baseThemeVariables.success,
-      innerAreaGradTo: 'rgba(60, 221, 156, 1)',
+      innerAreaGradTo: baseThemeVariables.success,
     },
 
     visitorsLegend: {
-      firstIcon: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)',
+      firstIcon: baseThemeVariables.success,
-      secondIcon: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)',
+      secondIcon: baseThemeVariables.primary,
     },
 
     visitorsPie: {
-      firstPieGradientLeft: '#8defbb',
+      firstPieGradientLeft: baseThemeVariables.success,
-      firstPieGradientRight: '#8defbb',
+      firstPieGradientRight: baseThemeVariables.success,
       firstPieShadowColor: 'rgba(0, 0, 0, 0)',
       firstPieRadius: ['70%', '90%'],
 
-      secondPieGradientLeft: '#ff894a',
+      secondPieGradientLeft: baseThemeVariables.warning,
-      secondPieGradientRight: '#ffcc10',
+      secondPieGradientRight: baseThemeVariables.warningLight,
       secondPieShadowColor: 'rgba(0, 0, 0, 0)',
       secondPieRadius: ['60%', '97%'],
       shadowOffsetX: '0',
@@ -268,8 +275,8 @@ export const DEFAULT_THEME = {
     },
 
     visitorsPieLegend: {
-      firstSection: 'linear-gradient(90deg, #ffcb17 0%, #ff874c 100%)',
+      firstSection: baseThemeVariables.warning,
-      secondSection: '#8defbb',
+      secondSection: baseThemeVariables.success,
     },
 
     earningPie: {
@@ -278,30 +285,30 @@ export const DEFAULT_THEME = {
 
       fontSize: '22',
 
-      firstPieGradientLeft: '#00d77f',
+      firstPieGradientLeft: baseThemeVariables.success,
-      firstPieGradientRight: '#00d77f',
+      firstPieGradientRight: baseThemeVariables.success,
       firstPieShadowColor: 'rgba(0, 0, 0, 0)',
 
-      secondPieGradientLeft: '#7756f7',
+      secondPieGradientLeft: baseThemeVariables.primary,
-      secondPieGradientRight: '#7756f7',
+      secondPieGradientRight: baseThemeVariables.primary,
       secondPieShadowColor: 'rgba(0, 0, 0, 0)',
 
-      thirdPieGradientLeft: '#ffca00',
+      thirdPieGradientLeft: baseThemeVariables.warning,
-      thirdPieGradientRight: '#ffca00',
+      thirdPieGradientRight: baseThemeVariables.warning,
       thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
     },
 
     earningLine: {
-      gradFrom: 'rgba(188, 92, 255, 0.5)',
+      gradFrom: baseThemeVariables.primary,
-      gradTo: 'rgba(188, 92, 255, 0.5)',
+      gradTo: baseThemeVariables.primary,
 
-      tooltipTextColor: '#2a2a2a',
+      tooltipTextColor: baseThemeVariables.fgText,
-      tooltipFontWeight: 'bolder',
+      tooltipFontWeight: 'normal',
       tooltipFontSize: '16',
-      tooltipBg: '#ffffff',
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: '#c0c8d1',
+      tooltipBorderColor: baseThemeVariables.border2,
-      tooltipBorderWidth: '3',
+      tooltipBorderWidth: '1',
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
     },
   },
-};
+} as NbJSThemeOptions;

src/app/@theme/styles/themes.scss

@@ -3,95 +3,86 @@
 // @nebular out of the box themes
 @import '~@nebular/theme/styles/themes';
 
-// which themes you what to enable (empty to enable all)
-$nb-enabled-themes: (default, cosmic, corporate);
-
 $nb-themes: nb-register-theme((
- // app wise variables for each theme
+  layout-padding-top: 2.25rem,
-  sidebar-header-gap: 2rem,
-  sidebar-header-height: initial,
-  layout-content-width: 1400px,
 
-  font-main: Roboto,
+  menu-item-icon-margin: 0 0.5rem 0 0,
-  font-secondary: Exo,
 
-  switcher-background: #ebeff5,
+  card-height-tiny: 13.5rem,
-  switcher-background-percentage: 50%,
+  card-height-small: 21.1875rem,
-  drops-icon-line-gadient: -webkit-linear-gradient(#01dbb5, #0bbb79),
+  card-height-medium: 28.875rem,
+  card-height-large: 36.5625rem,
+  card-height-giant: 44.25rem,
+  card-margin-bottom: 1.875rem,
+  card-header-with-select-padding-top: 0.5rem,
+  card-header-with-select-padding-bottom: 0.5rem,
 
-  list-item-border-width: 1px,
+  select-min-width: 6rem,
 
-  slide-out-container-width: 30%,
+  slide-out-background: #f7f9fc,
-  slide-out-background: linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
+  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
-  slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
-  slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
-
-  chart-panel-summary-box-shadow: none,
-  chart-panel-summary-background-color: #ecf2f5,
-  chart-panel-summary-border-color: #ebeff1,
-  chart-panel-summary-border-width: 1px,
-
-  ecommerce-card-border-width: 1px,
-
-  progress-bar-background: linear-gradient(90deg, #3edd81 0%, #3bddaf 100%),
 ), default, default);
 
 $nb-themes: nb-register-theme((
-  // app wise variables for each theme
+  layout-padding-top: 2.25rem,
-  sidebar-header-gap: 2rem,
-  sidebar-header-height: initial,
-  layout-content-width: 1400px,
 
-  font-main: Roboto,
+  menu-item-icon-margin: 0 0.5rem 0 0,
-  font-secondary: Exo,
 
-  switcher-background: #4e41a5,
+  card-height-tiny: 13.5rem,
-  switcher-background-percentage: 14%,
+  card-height-small: 21.1875rem,
-  drops-icon-line-gadient: -webkit-linear-gradient(#a258fe, #7958fa),
+  card-height-medium: 28.875rem,
+  card-height-large: 36.5625rem,
+  card-height-giant: 44.25rem,
+  card-margin-bottom: 1.875rem,
+  card-header-with-select-padding-top: 0.5rem,
+  card-header-with-select-padding-bottom: 0.5rem,
 
-  list-item-border-width: 1px,
+  select-min-width: 6rem,
 
-  slide-out-container-width: 30%,
+  slide-out-background: #252547,
-  slide-out-background: radial-gradient(circle, #302c6e 0%, #423f8c 100%),
+  slide-out-shadow-color: 2px 0 3px #29157a,
-  slide-out-shadow-color: 2px 0 3px rgba(19, 19, 94, 0.9),
+  slide-out-shadow-color-rtl: -2px 0 3px #29157a,
-  slide-out-shadow-color-rtl: -2px 0 3px rgba(19, 19, 94, 0.9),
-
-  chart-panel-summary-box-shadow: none,
-  chart-panel-summary-background-color: rgba(0, 0, 0, 0.1),
-  chart-panel-summary-border-color: #332e73,
-  chart-panel-summary-border-width: 1px,
-
-  ecommerce-card-border-width: 1px,
-
-  progress-bar-background: linear-gradient(90deg, #00c7c7 0%, #00d977 100%),
 ), cosmic, cosmic);
 
 $nb-themes: nb-register-theme((
-  // app wise variables for each theme
+  layout-padding-top: 2.25rem,
-  sidebar-header-gap: 2rem,
-  sidebar-header-height: initial,
-  layout-content-width: 1400px,
 
-  font-main: Roboto,
+  menu-item-icon-margin: 0 0.5rem 0 0,
-  font-secondary: Exo,
 
-  switcher-background: #2b2d34,
+  card-height-tiny: 13.5rem,
-  switcher-background-percentage: 14%,
+  card-height-small: 21.1875rem,
-  drops-icon-line-gadient: -webkit-linear-gradient(#e9e8eb, #a7a2be),
+  card-height-medium: 28.875rem,
+  card-height-large: 36.5625rem,
+  card-height-giant: 44.25rem,
+  card-margin-bottom: 1.875rem,
+  card-header-with-select-padding-top: 0.5rem,
+  card-header-with-select-padding-bottom: 0.5rem,
 
-  list-item-border-width: 1px,
+  select-min-width: 6rem,
 
-  slide-out-container-width: 30%,
+  slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%),
-  slide-out-background: 	linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
+  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
-  slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
-  slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
-
-  chart-panel-summary-box-shadow: none,
-  chart-panel-summary-background-color: #f7fafb,
-  chart-panel-summary-border-color: #ebeff1,
-  chart-panel-summary-border-width: 1px,
-
-  ecommerce-card-border-width: 1px,
-
-  progress-bar-background: linear-gradient(90deg, #ff9f6f 0%, #ff8b97 100%),
 ), corporate, corporate);
+
+$nb-themes: nb-register-theme((
+  layout-padding-top: 2.25rem,
+
+  menu-item-icon-margin: 0 0.5rem 0 0,
+
+  card-height-tiny: 13.5rem,
+  card-height-small: 21.1875rem,
+  card-height-medium: 28.875rem,
+  card-height-large: 36.5625rem,
+  card-height-giant: 44.25rem,
+  card-margin-bottom: 1.875rem,
+  card-header-with-select-padding-top: 0.5rem,
+  card-header-with-select-padding-bottom: 0.5rem,
+
+  select-min-width: 6rem,
+
+  slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%),
+  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
+), dark, dark);

src/app/@theme/theme.module.ts

@@ -1,56 +1,26 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-
 import {
   NbActionsModule,
-  NbCardModule,
   NbLayoutModule,
   NbMenuModule,
-  NbRouteTabsetModule,
   NbSearchModule,
   NbSidebarModule,
-  NbTabsetModule,
-  NbThemeModule,
   NbUserModule,
-  NbCheckboxModule,
-  NbPopoverModule,
   NbContextMenuModule,
-  NbProgressBarModule,
-  NbCalendarModule,
-  NbCalendarRangeModule,
-  NbStepperModule,
   NbButtonModule,
-  NbInputModule,
-  NbAccordionModule,
-  NbDatepickerModule,
-  NbDialogModule,
-  NbWindowModule,
-  NbListModule,
-  NbToastrModule,
-  NbAlertModule,
-  NbSpinnerModule,
-  NbRadioModule,
   NbSelectModule,
-  NbChatModule,
+  NbIconModule,
-  NbTooltipModule,
+  NbThemeModule,
-  NbCalendarKitModule,
 } from '@nebular/theme';
-
+import { NbEvaIconsModule } from '@nebular/eva-icons';
 import { NbSecurityModule } from '@nebular/security';
 
 import {
   FooterComponent,
   HeaderComponent,
   SearchInputComponent,
-  ThemeSettingsComponent,
-  SwitcherComponent,
-  LayoutDirectionSwitcherComponent,
-  ThemeSwitcherComponent,
   TinyMCEComponent,
-  ThemeSwitcherListComponent,
-  ToggleSettingsButtonComponent,
 } from './components';
 import {
   CapitalizePipe,
@@ -58,115 +28,65 @@ import {
   RoundPipe,
   TimingPipe,
   NumberWithCommasPipe,
-  EvaIconsPipe,
 } from './pipes';
 import {
   OneColumnLayoutComponent,
-  SampleLayoutComponent,
   ThreeColumnsLayoutComponent,
   TwoColumnsLayoutComponent,
 } from './layouts';
 import { DEFAULT_THEME } from './styles/theme.default';
 import { COSMIC_THEME } from './styles/theme.cosmic';
 import { CORPORATE_THEME } from './styles/theme.corporate';
-
+import { DARK_THEME } from './styles/theme.dark';
-const BASE_MODULES = [CommonModule, FormsModule, ReactiveFormsModule];
 
 const NB_MODULES = [
-  NbCardModule,
   NbLayoutModule,
-  NbTabsetModule,
-  NbRouteTabsetModule,
   NbMenuModule,
   NbUserModule,
   NbActionsModule,
   NbSearchModule,
   NbSidebarModule,
-  NbCheckboxModule,
-  NbPopoverModule,
   NbContextMenuModule,
-  NgbModule,
+  NbSecurityModule,
-  NbSecurityModule, // *nbIsGranted directive,
-  NbProgressBarModule,
-  NbCalendarModule,
-  NbCalendarRangeModule,
-  NbStepperModule,
   NbButtonModule,
-  NbListModule,
-  NbToastrModule,
-  NbInputModule,
-  NbAccordionModule,
-  NbDatepickerModule,
-  NbDialogModule,
-  NbWindowModule,
-  NbAlertModule,
-  NbSpinnerModule,
-  NbRadioModule,
   NbSelectModule,
-  NbChatModule,
+  NbIconModule,
-  NbTooltipModule,
+  NbEvaIconsModule,
-  NbCalendarKitModule,
 ];
-
 const COMPONENTS = [
-  SwitcherComponent,
-  LayoutDirectionSwitcherComponent,
-  ThemeSwitcherComponent,
-  ThemeSwitcherListComponent,
   HeaderComponent,
   FooterComponent,
   SearchInputComponent,
-  ThemeSettingsComponent,
   TinyMCEComponent,
   OneColumnLayoutComponent,
-  SampleLayoutComponent,
   ThreeColumnsLayoutComponent,
   TwoColumnsLayoutComponent,
-  ToggleSettingsButtonComponent,
 ];
-
-const ENTRY_COMPONENTS = [
-  ThemeSwitcherListComponent,
-];
-
 const PIPES = [
   CapitalizePipe,
   PluralPipe,
   RoundPipe,
   TimingPipe,
   NumberWithCommasPipe,
-  EvaIconsPipe,
-];
-
-const NB_THEME_PROVIDERS = [
-  ...NbThemeModule.forRoot(
-    {
-      name: 'cosmic',
-    },
-    [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME ],
-  ).providers,
-  ...NbSidebarModule.forRoot().providers,
-  ...NbMenuModule.forRoot().providers,
-  ...NbDatepickerModule.forRoot().providers,
-  ...NbDialogModule.forRoot().providers,
-  ...NbWindowModule.forRoot().providers,
-  ...NbToastrModule.forRoot().providers,
-  ...NbChatModule.forRoot({
-    messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
-  }).providers,
 ];
 
 @NgModule({
-  imports: [...BASE_MODULES, ...NB_MODULES],
+  imports: [CommonModule, ...NB_MODULES],
-  exports: [...BASE_MODULES, ...NB_MODULES, ...COMPONENTS, ...PIPES],
+  exports: [CommonModule, ...PIPES, ...COMPONENTS],
   declarations: [...COMPONENTS, ...PIPES],
-  entryComponents: [...ENTRY_COMPONENTS],
 })
 export class ThemeModule {
   static forRoot(): ModuleWithProviders {
     return <ModuleWithProviders>{
       ngModule: ThemeModule,
-      providers: [...NB_THEME_PROVIDERS],
+      providers: [
+        ...NbThemeModule.forRoot(
+          {
+            name: 'default',
+          },
+          [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ],
+        ).providers,
+      ],
     };
   }
 }

src/app/app-routing.module.ts

@@ -10,7 +10,11 @@ import {
 } from '@nebular/auth';
 
 const routes: Routes = [
-  { path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule' },
+  {
+    path: 'pages',
+    loadChildren: () => import('app/pages/pages.module')
+      .then(m => m.PagesModule),
+  },
   {
     path: 'auth',
     component: NbAuthComponent,
@@ -46,7 +50,7 @@ const routes: Routes = [
 ];
 
 const config: ExtraOptions = {
-  useHash: true,
+  useHash: false,
 };
 
 @NgModule({

src/app/app.module.ts

@@ -3,17 +3,23 @@
  * Copyright Akveo. All Rights Reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
-import { APP_BASE_HREF } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { CoreModule } from './@core/core.module';
-
+import { ThemeModule } from './@theme/theme.module';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
-import { ThemeModule } from './@theme/theme.module';
+import {
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+  NbChatModule,
+  NbDatepickerModule,
+  NbDialogModule,
+  NbMenuModule,
+  NbSidebarModule,
+  NbToastrModule,
+  NbWindowModule,
+} from '@nebular/theme';
 
 @NgModule({
   declarations: [AppComponent],
@@ -23,14 +29,20 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
     HttpClientModule,
     AppRoutingModule,
 
-    NgbModule.forRoot(),
     ThemeModule.forRoot(),
+
+    NbSidebarModule.forRoot(),
+    NbMenuModule.forRoot(),
+    NbDatepickerModule.forRoot(),
+    NbDialogModule.forRoot(),
+    NbWindowModule.forRoot(),
+    NbToastrModule.forRoot(),
+    NbChatModule.forRoot({
+      messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
+    }),
     CoreModule.forRoot(),
   ],
   bootstrap: [AppComponent],
-  providers: [
-    { provide: APP_BASE_HREF, useValue: '/' },
-  ],
 })
 export class AppModule {
 }

src/app/pages/bootstrap/bootstrap-routing.module.ts

@@ -1,33 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { BootstrapComponent } from './bootstrap.component';
-import { ModalsComponent } from './modals/modals.component';
-import { ButtonsComponent } from './buttons/buttons.component';
-import { FormInputsComponent } from './form-inputs/form-inputs.component';
-
-
-const routes: Routes = [{
-  path: '',
-  component: BootstrapComponent,
-  children: [
-    {
-      path: 'inputs',
-      component: FormInputsComponent,
-    },
-    {
-      path: 'buttons',
-      component: ButtonsComponent,
-    },
-    {
-      path: 'modal',
-      component: ModalsComponent,
-    },
-  ],
-}];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class BootstrapRoutingModule { }

src/app/pages/bootstrap/bootstrap.module.ts

@@ -1,36 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { ThemeModule } from '../../@theme/theme.module';
-
-import { BootstrapRoutingModule } from './bootstrap-routing.module';
-import { ModalsComponent } from './modals/modals.component';
-import { ModalComponent } from './modals/modal/modal.component';
-import { BootstrapComponent } from './bootstrap.component';
-import { ButtonsModule } from './buttons/buttons.module';
-import { FormInputsComponent } from './form-inputs/form-inputs.component';
-
-const COMPONENTS = [
-  BootstrapComponent,
-  ModalsComponent,
-  ModalComponent,
-  FormInputsComponent,
-];
-
-const ENTRY_COMPONENTS = [
-  ModalComponent,
-];
-
-@NgModule({
-  imports: [
-    ThemeModule,
-    BootstrapRoutingModule,
-    ButtonsModule,
-  ],
-  declarations: [
-    ...COMPONENTS,
-  ],
-  entryComponents: [
-    ...ENTRY_COMPONENTS,
-  ],
-})
-export class BootstrapModule { }

src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.html

@@ -1,16 +0,0 @@
-<nb-card>
-  <nb-card-header>Block Level Buttons</nb-card-header>
-  <nb-card-body>
-    <div class="row block-level-buttons">
-      <div class="col-md-12">
-        <div class="btn-group btn-group-full-width" role="group">
-          <button type="button" class="btn btn-primary btn-group-icon btn-group-divider btn-fixed">
-            <i class="nb-home"></i>
-          </button>
-          <button type="button" class="btn btn-primary">Icon Block Button</button>
-        </div>
-        <button type="button" class="btn btn-outline-primary btn-block">Block Button</button>
-      </div>
-    </div>
-  </nb-card-body>
-</nb-card>

src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-block-level-buttons',
-  templateUrl: './block-level-buttons.component.html',
-})
-export class BlockLevelButtonsComponent {
-}

src/app/pages/bootstrap/buttons/button-groups/button-groups.component.html

@@ -1,144 +0,0 @@
-<nb-card>
-  <nb-card-header>Button Groups</nb-card-header>
-  <nb-card-body>
-    <div class="row">
-      <div class="col-md-12">
-        <div class="example-container toggle-types">
-          <div class="container-title">Toggle Types</div>
-          <div [(ngModel)]="radioModel" ngbRadioGroup
-               class="btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
-            <label ngbButtonLabel class="btn btn-outline-primary">
-              <input ngbButton type="radio" value="left"> Left
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-primary">
-              <input ngbButton type="radio" value="middle"> Middle
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-primary">
-              <input ngbButton type="radio" value="right"> Right
-            </label>
-          </div>
-          <div class="btn-group btn-group-toggle btn-group-full-width" data-toggle="buttons">
-            <label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.left">
-              <input ngbButton type="checkbox" [(ngModel)]="checkboxModel.left"> Left
-            </label>
-            <label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.middle">
-              <input ngbButton type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
-            </label>
-            <label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.right">
-              <input ngbButton type="checkbox" [(ngModel)]="checkboxModel.right"> Right
-            </label>
-          </div>
-        </div>
-        <div class="example-container toolbars-container">
-          <div class="pagination-container">
-            <div class="container-title">Pagination</div>
-            <div class="btn-group btn-group-toggle btn-outline-toggle-group" data-toggle="buttons"
-                 [(ngModel)]="paginationModel" ngbRadioGroup>
-              <label ngbButtonLabel class="btn btn-outline-success">
-                <input ngbButton type="radio" [value]="1"> 1
-              </label>
-              <label ngbButtonLabel class="btn btn-outline-success">
-                <input ngbButton type="radio" [value]="2"> 2
-              </label>
-              <label ngbButtonLabel class="btn btn-outline-success">
-                <input ngbButton type="radio" [value]="3"> 3
-              </label>
-              <label ngbButtonLabel class="btn btn-outline-success">
-                <input ngbButton type="radio" [value]="4"> 4
-              </label>
-              <label ngbButtonLabel class="btn btn-outline-success">
-                <input ngbButton type="radio" [value]="5"> 5
-              </label>
-            </div>
-          </div>
-
-          <div class="icon-toolbar-container">
-            <div class="container-title">Icon Toolbar</div>
-            <div class="btn-group btn-group-toggle" data-toggle="buttons">
-              <label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.one">
-                <input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
-              </label>
-              <label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.two">
-                <input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
-              </label>
-              <label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.three">
-                <input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
-              </label>
-              <label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.four">
-                <input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
-              </label>
-              <label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.five">
-                <input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5
-              </label>
-            </div>
-          </div>
-        </div>
-        <div class="example-container">
-          <div class="container-title divided-button-group">Divided Button Group</div>
-          <div class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width btn-divided-checkbox-group "
-            data-toggle="buttons">
-            <label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"> <i
-              class="nb-arrow-thin-down"></i>
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"> <i
-              class="nb-arrow-thin-up"></i>
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="nb-arrow-thin-left"></i>
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"> <i
-              class="nb-arrow-thin-right"></i>
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"> <i class="nb-arrow-left"></i>
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"> <i
-              class="nb-arrow-right"></i>
-            </label>
-          </div>
-        </div>
-        <div class="example-container">
-          <div class="container-title">Divided Button Group</div>
-          <div class="row">
-            <div [(ngModel)]="dividedButtonGroupOne" ngbRadioGroup
-                 class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width col-md-12">
-              <label ngbButtonLabel class="btn btn-outline-primary">
-                <input ngbButton type="radio" value="left"> Left
-              </label>
-              <label ngbButtonLabel class="btn btn-outline-primary">
-                <input ngbButton type="radio" value="middle"> Middle
-              </label>
-              <label ngbButtonLabel class="btn btn-outline-primary">
-                <input ngbButton type="radio" value="right"> Right
-              </label>
-            </div>
-          </div>
-          <div class="btn-group btn-group-toggle btn-divided-group btn-group-full-width" data-toggle="buttons">
-            <label ngbButtonLabel
-                   class="btn btn-primary"
-                   [class.active]="dividedButtonGroupTwo.left"
-                   [class.focus]="dividedButtonGroupTwo.left">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.left"> Left
-            </label>
-            <label ngbButtonLabel
-                   class="btn btn-primary"
-                   [class.active]="dividedButtonGroupTwo.middle"
-                   [class.focus]="dividedButtonGroupTwo.middle">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.middle"> Middle
-            </label>
-            <label ngbButtonLabel
-                   class="btn btn-primary"
-                   [class.active]="dividedButtonGroupTwo.right"
-                   [class.focus]="dividedButtonGroupTwo.right">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.right"> Right
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-  </nb-card-body>
-</nb-card>

src/app/pages/bootstrap/buttons/button-groups/button-groups.component.scss

@@ -1,67 +0,0 @@
-@import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-
-  .toolbars-container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .pagination-container {
-    @include nb-ltr(margin-right, 1rem);
-    @include nb-rtl(margin-left, 1rem);
-
-    .btn-group > .btn {
-      padding-left: 1.125rem;
-      padding-right: 1.125rem;
-    }
-  }
-
-  .icon-toolbar-container {
-    .btn-group > .btn {
-      padding-left: 1.125rem;
-      padding-right: 1.125rem;
-    }
-  }
-
-  .toggle-types {
-    .btn-toggle-radio-group {
-      margin-bottom: 1rem;
-    }
-  }
-
-  .divided-button-group {
-    .btn-divided-checkbox-group {
-      margin-bottom: 1rem;
-      flex-wrap: wrap;
-    }
-  }
-
-  .example-container:not(:last-child) {
-    margin-bottom: 1.5rem;
-  }
-
-  .example-container > div {
-    &:not(:last-child) {
-      margin-bottom: 1rem;
-    }
-  }
-
-  .example-container > .btn-divided-checkbox-group {
-    flex-wrap: wrap;
-
-    > label {
-      flex-basis: 10%;
-      @include nb-ltr(margin, 0 0.25rem 0.5rem 0);
-      @include nb-rtl(margin, 0 0 0.5rem 0.25rem);
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-    .btn {
-      padding: 0.75rem 0.7rem;
-    }
-  }
-}