Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: upgrade to angular9, upgrade to nebular 5.0, add material theme (#5694)

Browse source 
* chore: update README for extra theme (#5466)

* fix(tinymce): set absolute path for skin url (#5491)

* feat: add calendar with week numbers example (#5515)

* chore(readme): update bundles section text

* fix(forms): add missing forms module import (#5530)

* feat: update Nebular to 4.4.0 (#5533)

* chore(readme): update bundles image (#5565)

* chore: add bundles black friday deal (#5569)

* chore(readme): update black friday 2019 image (#5570)

* chore(readme): remove bundles discounts image (#5574)

* chore(readme): update bundles image (#5575)

* feat(seo): add canonical tag (#5578)

* chore(analytics): add proper analytics tracking URLs (#5604)

* feat: Material theme

* feat: upgrade to Angular 9 and Nebular 5 (#5628)

BREAKING CHANGE:
Angular updated to version 9.
Nebular updated to version 5.
`@agm/core` replaced with `@angular/google-maps`.
`ng2-completer` replaced with `@akveo/ng2-completer`, read details [here](https://github.com/akveo/ng2-smart-table/pull/1140#issue-392285957).

* Upgrade to the latest minor version of Angular

* Upgrade to the latest major version of Angular

* Upgrade to nebular 5 beta, remove "angular-tree-component" package

* Remove packages uncompatible with Ivy

* Fix post-upgrade errors

* Replace @agm/core with @angular/google-maps

* Fix search-map component using @angular/google-maps

* Move material theme files from @nebular

* Add missing images and change fg text color of dark material theme to bright white

* Implement ripple effect for material themes

* Add material style overrides

* Add ripple effects to controls across application

* Configure material theme, add material button and input examples

* Add toggle button example

* Fix lint warnings

* Add material menu icon for material themes

* Fix lint warnings for styles

* Set menu font-weight to normal for material themes

* Add "hover" and "active" styles for material menu

* Update material styles

* Override input styles for material themes

* Override select styles for material themes

* Hide rounded inputs for material themes

* Update material styles

* Remove non-material themes

* Revert "Remove non-material themes"

This reverts commit c2e319499f.

* Fix actions color

* Fix lint warnings

* Fix scrollbar for "traffic" card

* Fix scroll for "user activity" card

* Revert "Fix scroll for "user activity" card"

This reverts commit 4d793b1731.

* Revert "Fix scrollbar for "traffic" card"

This reverts commit b00da0d260.

* Fix scroll for nb-list inside nb-card

* chore(readme): add material theme description

* Remove unused angular2-toaster package

* chore(readme): add material theme images

* chore(readme): update text

* Upgrade to @nebular 5 release

* feat: update ng2-smart-table to 1.6

* chore(readme): add info about material theme branch

* fix: put Material theme in front of others

Otherwise Material theme style override Nebular

* refactor(material): remove options list border radius

* refactor: material input new look

* fix(form-inputs): show material inputs
* feat(material): change inputs style

* refactor: improve observable layout change sharing

* feat: add safe delayed event of layout change

* fix: replace change layout with safe change

* fix: limit front card width to prevent map overflow before repaint

* build: starter-kit clean up

* feat: upgrade to angular 9

Co-authored-by: David Henley <henleydr@gmail.com>
Co-authored-by: Sergey Andrievskiy <yggg@users.noreply.github.com>
Co-authored-by: Leon Lafayette <me@le0n.io>
Co-authored-by: Vladimir Lugovsky <lugovsky.v@gmail.com>
Co-authored-by: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Co-authored-by: Evgeny Lupanov <elupanov@users.noreply.github.com>
Co-authored-by: eugene-sinitsyn <e.sinitsyn.s@akveo.com>
Co-authored-by: Evgeny Lupanov <e.lupanov@akveo.com>
Co-authored-by: sashaqred <sashaqred@ya.ru>
Co-authored-by: Dmitry Nehaychik <4dmitr@gmail.com>
Co-authored-by: Maksim Karatkevich <m.karatkevich@akveo.com>
This commit is contained in:
maksim-karatkevich 2020-05-22 18:43:15 +03:00 • committed by GitHub
parent 9b560a0661
commit 07f430126f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 9329 additions and 4475 deletions
Download patch file Download diff file Expand all files Collapse all files

22
README.md
View file

@ -2,38 +2,42 @@
[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 8+ and <a href="https://github.com/akveo/nebular">Nebular</a>
# Admin template based on Angular 9+ 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/mFdqvgG.png"/></a>
### Backend Integration Bundles
Easy way to integrate ngx-admin with backend (.NET, Node.js, Java etc.).
<a target="_blank" href="https://hubs.ly/H0qwC1L0">
<a target="_blank" href="https://hubs.ly/H0n4ZxC0">
<img src="https://i.imgur.com/Ywbs8cl.png"/>
</a>
[Checkout our Store](https://hubs.ly/H0qwC2Q0) for ready to use Backend Bundles.
### With 3 stunning visual themes
### With 6 stunning visual themes
#### Material Dark
<a target="_blank" href="https://hubs.ly/H0nxM3b0"><img src="https://i.imgur.com/csP0aZ9.png"/></a>
#### Material Light
<a target="_blank" href="https://hubs.ly/H0nxNmv0"><img src="https://i.imgur.com/J5Rmgn4.png"/></a>
#### 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>
<a target="_blank" href="https://hubs.ly/H0n4Tgv0"><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>
<a target="_blank" href="https://hubs.ly/H0n4Th20"><img src="https://i.imgur.com/FAn5iXY.png"/></a>
#### Cosmic
<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>
<a target="_blank" href="https://hubs.ly/H0n4Tj80"><img src="https://i.imgur.com/iJu2YDF.png"/></a>
#### Corporate
<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>
<a target="_blank" href="https://hubs.ly/H0n4TDQ0"><img src="https://i.imgur.com/GpUt6NW.png"/></a>
### What's included:
- Angular 8+ & Typescript
- Angular 9+ & Typescript
- Bootstrap 4+ & SCSS
- Responsive layout
- RTL support

54
angular.json
View file

@ -11,6 +11,7 @@
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
"preserveSymlinks": true,
"rebaseRootRelativeCssUrls": true,
"outputPath": "dist",
@ -21,24 +22,45 @@
"assets": [
"src/assets",
"src/favicon.ico",
"src/favicon.png"
"src/favicon.png",
{
"glob": "**/*",
"input": "node_modules/leaflet/dist/images",
"output": "/assets/img/markers"
}
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/typeface-exo/index.css",
"node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
"node_modules/ionicons/scss/ionicons.scss",
"node_modules/@fortawesome/fontawesome-free/css/all.css",
"node_modules/socicon/css/socicon.css",
"node_modules/nebular-icons/scss/nebular-icons.scss",
"node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
"node_modules/leaflet/dist/leaflet.css",
"src/app/@theme/styles/styles.scss"
],
"scripts": [
"node_modules/pace-js/pace.min.js"
"node_modules/pace-js/pace.min.js",
"node_modules/tinymce/tinymce.min.js",
"node_modules/tinymce/themes/modern/theme.min.js",
"node_modules/tinymce/plugins/link/plugin.min.js",
"node_modules/tinymce/plugins/paste/plugin.min.js",
"node_modules/tinymce/plugins/table/plugin.min.js",
"node_modules/echarts/dist/echarts.min.js",
"node_modules/echarts/dist/extension/bmap.min.js",
"node_modules/chart.js/dist/Chart.min.js"
]
},
"configurations": {
"production": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
@ -82,13 +104,22 @@
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [
"node_modules/pace-js/pace.min.js"
"node_modules/pace-js/pace.min.js",
"node_modules/tinymce/tinymce.min.js",
"node_modules/tinymce/themes/modern/theme.min.js",
"node_modules/tinymce/plugins/link/plugin.min.js",
"node_modules/tinymce/plugins/paste/plugin.min.js",
"node_modules/tinymce/plugins/table/plugin.min.js",
"node_modules/echarts/dist/echarts.min.js",
"node_modules/echarts/dist/extension/bmap.min.js",
"node_modules/chart.js/dist/Chart.min.js"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/typeface-exo/index.css",
"node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
"node_modules/ionicons/scss/ionicons.scss",
"node_modules/font-awesome/scss/font-awesome.scss",
"node_modules/socicon/css/socicon.css",
"node_modules/nebular-icons/scss/nebular-icons.scss",
"node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
@ -97,7 +128,12 @@
"assets": [
"src/assets",
"src/favicon.ico",
"src/favicon.png"
"src/favicon.png",
{
"glob": "**/*",
"input": "node_modules/leaflet/dist/images",
"output": "/assets/img/markers"
}
]
}
},
@ -141,8 +177,14 @@
"defaultProject": "ngx-admin-demo",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
"prefix": "ngx",
"style": "scss"
},
"@schematics/angular:directive": {}
"@schematics/angular:directive": {
"prefix": "ngx"
}
},
"cli": {
"analytics": "25084c8e-7e3c-4955-91c5-66ed595e9666"
}
}

11634
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

69
package.json
View file

@ -26,51 +26,68 @@
"docs": "compodoc -p src/tsconfig.app.json -d docs",
"docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
"prepush": "npm run lint:ci",
"release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s"
"release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s",
"postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points"
},
"dependencies": {
"@agm/core": "^1.0.0-beta.5",
"@angular/animations": "^8.0.0",
"@angular/cdk": "^8.0.0",
"@angular/common": "^8.0.0",
"@angular/compiler": "^8.0.0",
"@angular/core": "^8.0.0",
"@angular/forms": "^8.0.0",
"@angular/platform-browser": "^8.0.0",
"@angular/platform-browser-dynamic": "^8.0.0",
"@angular/router": "^8.0.0",
"@nebular/auth": "4.1.2",
"@nebular/eva-icons": "4.1.2",
"@nebular/security": "4.1.2",
"@nebular/theme": "4.1.2",
"@akveo/ng2-completer": "^9.0.1",
"@angular/animations": "^9.0.4",
"@angular/cdk": "^9.1.2",
"@angular/common": "^9.0.4",
"@angular/compiler": "^9.0.4",
"@angular/core": "^9.0.4",
"@angular/forms": "^9.0.4",
"@angular/material": "^9.1.0",
"@angular/platform-browser": "^9.0.4",
"@angular/platform-browser-dynamic": "^9.0.4",
"@angular/router": "^9.0.4",
"@asymmetrik/ngx-leaflet": "3.0.1",
"@nebular/auth": "5.0.0",
"@nebular/eva-icons": "5.0.0",
"@nebular/security": "5.0.0",
"@nebular/theme": "5.0.0",
"@swimlane/ngx-charts": "^13.0.2",
"angular2-chartjs": "0.4.1",
"bootstrap": "4.3.1",
"chart.js": "2.7.1",
"ckeditor": "4.7.3",
"classlist.js": "1.1.20150312",
"core-js": "2.5.1",
"eva-icons": "^1.1.0",
"echarts": "^4.0.2",
"eva-icons": "^1.1.3",
"intl": "1.2.5",
"ionicons": "2.0.1",
"leaflet": "1.2.0",
"nebular-icons": "1.1.0",
"ng2-ckeditor": "^1.2.2",
"ngx-echarts": "^4.2.2",
"node-sass": "^4.12.0",
"normalize.css": "6.0.0",
"pace-js": "1.0.2",
"roboto-fontface": "0.8.0",
"rxjs": "6.5.2",
"rxjs": "6.5.4",
"rxjs-compat": "6.3.0",
"socicon": "3.0.5",
"style-loader": "^1.1.3",
"tinymce": "4.5.7",
"tslib": "^1.10.0",
"typeface-exo": "0.0.22",
"web-animations-js": "github:angular/web-animations-js#release_pr208",
"zone.js": "~0.9.1"
"web-animations-js": "^2.3.2",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.800.2",
"@angular/cli": "^8.0.2",
"@angular/compiler-cli": "^8.0.0",
"@angular/language-service": "8.0.0",
"@angular-devkit/build-angular": "~0.900.4",
"@angular/cli": "^9.0.4",
"@angular/compiler-cli": "^9.0.4",
"@angular/language-service": "9.0.4",
"@compodoc/compodoc": "1.0.1",
"@fortawesome/fontawesome-free": "^5.2.0",
"@types/d3-color": "1.0.5",
"@types/jasmine": "2.5.54",
"@types/jasminewd2": "2.0.3",
"@types/node": "6.0.90",
"codelyzer": "^5.0.1",
"@types/leaflet": "1.2.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"conventional-changelog-cli": "1.3.4",
"husky": "0.13.3",
"jasmine-core": "2.6.4",
@ -88,6 +105,6 @@
"ts-node": "3.2.2",
"tslint": "^5.7.0",
"tslint-language-service": "^0.9.9",
"typescript": "3.4.5"
"typescript": "3.7.5"
}
}

10
src/app/@core/core.module.ts
View file

@ -5,7 +5,10 @@ import { NbSecurityModule, NbRoleProvider } from '@nebular/security';
import { of as observableOf } from 'rxjs';
import { throwIfAlreadyLoaded } from './module-import-guard';
import { AnalyticsService } from './utils';
import {
AnalyticsService,
LayoutService,
} from './utils';
import { UserData } from './data/users';
import { UserService } from './mock/users.service';
import { MockDataModule } from './mock/mock-data.module';
@ -78,6 +81,7 @@ export const NB_CORE_PROVIDERS = [
provide: NbRoleProvider, useClass: NbSimpleRoleProvider,
},
AnalyticsService,
LayoutService,
];
@NgModule({
@ -94,8 +98,8 @@ export class CoreModule {
throwIfAlreadyLoaded(parentModule, 'CoreModule');
}
static forRoot(): ModuleWithProviders {
return <ModuleWithProviders>{
static forRoot(): ModuleWithProviders<CoreModule> {
return {
ngModule: CoreModule,
providers: [
...NB_CORE_PROVIDERS,

8
src/app/@core/utils/index.ts
View file

@ -1 +1,7 @@
export { AnalyticsService } from './analytics.service';
import { LayoutService } from './layout.service';
import { AnalyticsService } from './analytics.service';
export {
LayoutService,
AnalyticsService,
};

26
src/app/@core/utils/layout.service.ts Normal file
View file

@ -0,0 +1,26 @@
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { delay, shareReplay, debounceTime } from 'rxjs/operators';
@Injectable()
export class LayoutService {
protected layoutSize$ = new Subject();
protected layoutSizeChange$ = this.layoutSize$.pipe(
shareReplay({ refCount: true }),
);
changeLayoutSize() {
this.layoutSize$.next();
}
onChangeLayoutSize(): Observable<any> {
return this.layoutSizeChange$.pipe(delay(1));
}
onSafeChangeLayoutSize(): Observable<any> {
return this.layoutSizeChange$.pipe(
debounceTime(350),
);
}
}

11
src/app/@core/utils/ripple.service.ts Normal file
View file

@ -0,0 +1,11 @@
import { Injectable } from '@angular/core';
import { RippleGlobalOptions } from '@angular/material/core';
@Injectable({providedIn: 'root'})
export class RippleService implements RippleGlobalOptions {
public disabled: boolean = false;
public toggle(enabled: boolean): void {
this.disabled = !enabled;
}
}

55
src/app/@theme/components/header/header.component.html
View file

@ -1,12 +1,28 @@
<div class="header-container">
<div class="logo-container">
<a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
<nb-icon icon="menu-2-outline"></nb-icon>
<a
href="#"
class="sidebar-toggle"
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
(click)="toggleSidebar()"
>
<nb-icon [icon]="(materialTheme$ | async) ? 'menu-outline' : 'menu-2-outline'"></nb-icon>
</a>
<a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
</div>
<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
status="primary"
matRipple
[selected]="currentTheme"
(selectedChange)="changeTheme($event)"
>
<nb-option
*ngFor="let theme of themes"
[value]="theme.value"
matRipple
>{{ theme.name }}</nb-option>
</nb-select>
<ngx-layout-direction-switcher class="direction-switcher"></ngx-layout-direction-switcher>
</div>
@ -15,11 +31,32 @@
<nb-actions size="small">
<nb-action class="control-item">
<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-search
type="rotate-layout"
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
></nb-search></nb-action>
<nb-action
class="control-item"
icon="email-outline"
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
></nb-action>
<nb-action
class="control-item"
icon="bell-outline"
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
></nb-action>
<nb-action
class="user-action"
*nbIsGranted="['view', 'user']"
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true">
<nb-user [nbContextMenu]="userMenu"
[onlyPicture]="userPictureOnly"
[name]="user?.name"

4
src/app/@theme/components/header/header.component.scss
View file

@ -33,8 +33,8 @@
width: auto;
.sidebar-toggle {
@include nb-ltr(padding-right, 1.25rem);
@include nb-rtl(padding-left, 1.25rem);
@include nb-ltr(margin-right, 1.25rem);
@include nb-rtl(margin-left, 1.25rem);
text-decoration: none;
color: nb-theme(text-hint-color);
nb-icon {

38
src/app/@theme/components/header/header.component.ts
View file

@ -2,8 +2,10 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
import { UserData } from '../../../@core/data/users';
import { LayoutService } from '../../../@core/utils';
import { map, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { Subject, Observable } from 'rxjs';
import { RippleService } from '../../../@core/utils/ripple.service';
@Component({
selector: 'ngx-header',
@ -13,6 +15,7 @@ import { Subject } from 'rxjs';
export class HeaderComponent implements OnInit, OnDestroy {
private destroy$: Subject<void> = new Subject<void>();
public readonly materialTheme$: Observable<boolean>;
userPictureOnly: boolean = false;
user: any;
@ -33,17 +36,34 @@ export class HeaderComponent implements OnInit, OnDestroy {
value: 'corporate',
name: 'Corporate',
},
{
value: 'material-light',
name: 'Material Light',
},
{
value: 'material-dark',
name: 'Material Dark',
},
];
currentTheme = 'default';
userMenu = [ { title: 'Profile' }, { title: 'Log out' } ];
constructor(private sidebarService: NbSidebarService,
private menuService: NbMenuService,
private themeService: NbThemeService,
private userService: UserData,
private breakpointService: NbMediaBreakpointsService) {
public constructor(
private sidebarService: NbSidebarService,
private menuService: NbMenuService,
private themeService: NbThemeService,
private userService: UserData,
private layoutService: LayoutService,
private breakpointService: NbMediaBreakpointsService,
private rippleService: RippleService,
) {
this.materialTheme$ = this.themeService.onThemeChange()
.pipe(map(theme => {
const themeName: string = theme?.name || '';
return themeName.startsWith('material');
}));
}
ngOnInit() {
@ -66,7 +86,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
map(({ name }) => name),
takeUntil(this.destroy$),
)
.subscribe(themeName => this.currentTheme = themeName);
.subscribe(themeName => {
this.currentTheme = themeName;
this.rippleService.toggle(themeName?.startsWith('material'));
});
}
ngOnDestroy() {
@ -80,6 +103,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
toggleSidebar(): boolean {
this.sidebarService.toggle(true, 'menu-sidebar');
this.layoutService.changeLayoutSize();
return false;
}

11
src/app/@theme/styles/_overrides.scss
View file

@ -8,4 +8,15 @@
right: 0.41rem !important;
}
}
nb-card nb-list {
@include nb-scrollbars(
nb-theme(card-scrollbar-color),
nb-theme(card-scrollbar-background-color),
nb-theme(card-scrollbar-width));
}
.table {
color: nb-theme(text-basic-color) !important;
}
}

15
src/app/@theme/styles/material/_angular-material.scss Normal file
View file

@ -0,0 +1,15 @@
@import '~@angular/material/theming';
@mixin angular-material() {
@include mat-core();
@include nb-for-theme(material-dark) {
$custom-dark-theme: mat-dark-theme(mat-palette($mat-pink), mat-palette($mat-blue-grey));
@include angular-material-theme($custom-dark-theme);
}
@include nb-for-theme(material-light) {
$custom-light-theme: mat-light-theme(mat-palette($mat-indigo), mat-palette($mat-pink));
@include angular-material-theme($custom-light-theme);
}
}

501
src/app/@theme/styles/material/_material-dark.scss Normal file
View file

@ -0,0 +1,501 @@
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@import '~@nebular/theme/styles/core/functions';
@import '~@nebular/theme/styles/core/mixins';
$theme: (
color-primary-100: #fff2f7,
color-primary-200: #ffd4e3,
color-primary-300: #fc9abc,
color-primary-400: #f24681,
color-primary-500: #e91d63,
color-primary-600: #c71451,
color-primary-700: #a80d43,
color-primary-800: #870935,
color-primary-900: #70062a,
color-primary-transparent-100: rgba(233, 29, 99, 0.08),
color-primary-transparent-200: rgba(233, 29, 99, 0.16),
color-primary-transparent-300: rgba(233, 29, 99, 0.24),
color-primary-transparent-400: rgba(233, 29, 99, 0.32),
color-primary-transparent-500: rgba(233, 29, 99, 0.4),
color-primary-transparent-600: rgba(233, 29, 99, 0.48),
color-success-100: #edfbd1,
color-success-200: #d7f7a6,
color-success-300: #b4e775,
color-success-400: #8fcf50,
color-success-500: #60af20,
color-success-600: #499617,
color-success-700: #357d10,
color-success-800: #24650a,
color-success-900: #175306,
color-success-transparent-100: rgba(96, 175, 32, 0.08),
color-success-transparent-200: rgba(96, 175, 32, 0.16),
color-success-transparent-300: rgba(96, 175, 32, 0.24),
color-success-transparent-400: rgba(96, 175, 32, 0.32),
color-success-transparent-500: rgba(96, 175, 32, 0.4),
color-success-transparent-600: rgba(96, 175, 32, 0.48),
color-info-100: #ccf7fe,
color-info-200: #99e9fd,
color-info-300: #66d3f9,
color-info-400: #40bbf4,
color-info-500: #0495ee,
color-info-600: #0273cc,
color-info-700: #0256ab,
color-info-800: #013d8a,
color-info-900: #002b72,
color-info-transparent-100: rgba(4, 149, 238, 0.08),
color-info-transparent-200: rgba(4, 149, 238, 0.16),
color-info-transparent-300: rgba(4, 149, 238, 0.24),
color-info-transparent-400: rgba(4, 149, 238, 0.32),
color-info-transparent-500: rgba(4, 149, 238, 0.4),
color-info-transparent-600: rgba(4, 149, 238, 0.48),
color-warning-100: #fff3cd,
color-warning-200: #ffe49b,
color-warning-300: #ffd169,
color-warning-400: #ffbe43,
color-warning-500: #ff9f05,
color-warning-600: #db8003,
color-warning-700: #b76302,
color-warning-800: #934a01,
color-warning-900: #7a3800,
color-warning-transparent-100: rgba(255, 159, 5, 0.08),
color-warning-transparent-200: rgba(255, 159, 5, 0.16),
color-warning-transparent-300: rgba(255, 159, 5, 0.24),
color-warning-transparent-400: rgba(255, 159, 5, 0.32),
color-warning-transparent-500: rgba(255, 159, 5, 0.4),
color-warning-transparent-600: rgba(255, 159, 5, 0.48),
color-danger-100: #fbd2c8,
color-danger-200: #f79e94,
color-danger-300: #e75d5c,
color-danger-400: #cf3341,
color-danger-500: #b00020,
color-danger-600: #970029,
color-danger-700: #7e002e,
color-danger-800: #66002f,
color-danger-900: #54002f,
color-danger-transparent-100: rgba(176, 0, 32, 0.08),
color-danger-transparent-200: rgba(176, 0, 32, 0.16),
color-danger-transparent-300: rgba(176, 0, 32, 0.24),
color-danger-transparent-400: rgba(176, 0, 32, 0.32),
color-danger-transparent-500: rgba(176, 0, 32, 0.4),
color-danger-transparent-600: rgba(176, 0, 32, 0.48),
color-basic-100: #ffffff,
color-basic-200: #f5f5f5,
color-basic-300: #f5f5f5,
color-basic-400: #d4d4d4,
color-basic-500: #b3b3b3,
color-basic-600: #808080,
color-basic-700: #404040,
color-basic-800: #353535,
color-basic-900: #303030,
color-basic-1000: #1f1f1f,
color-basic-1100: #141414,
color-basic-transparent-100: rgba(128, 128, 128, 0.08),
color-basic-transparent-200: rgba(128, 128, 128, 0.16),
color-basic-transparent-300: rgba(128, 128, 128, 0.24),
color-basic-transparent-400: rgba(128, 128, 128, 0.32),
color-basic-transparent-500: rgba(128, 128, 128, 0.4),
color-basic-transparent-600: rgba(128, 128, 128, 0.48),
color-basic-control-transparent-100: rgba(255, 255, 255, 0.08),
color-basic-control-transparent-200: rgba(255, 255, 255, 0.16),
color-basic-control-transparent-300: rgba(255, 255, 255, 0.24),
color-basic-control-transparent-400: rgba(255, 255, 255, 0.32),
color-basic-control-transparent-500: rgba(255, 255, 255, 0.4),
color-basic-control-transparent-600: rgba(255, 255, 255, 0.48),
color-basic-focus: color-basic-400,
color-basic-hover: color-basic-200,
color-basic-default: color-basic-300,
color-basic-active: color-basic-400,
color-basic-disabled: color-basic-transparent-300,
color-basic-focus-border: color-basic-500,
color-basic-hover-border: color-basic-hover,
color-basic-default-border: color-basic-default,
color-basic-active-border: color-basic-active,
color-basic-disabled-border: color-basic-disabled,
color-basic-transparent-focus: color-basic-transparent-300,
color-basic-transparent-hover: color-basic-transparent-200,
color-basic-transparent-default: color-basic-transparent-100,
color-basic-transparent-active: color-basic-transparent-300,
color-basic-transparent-disabled: color-basic-transparent-200,
color-basic-transparent-focus-border: color-basic-500,
color-basic-transparent-hover-border: color-basic-500,
color-basic-transparent-default-border: color-basic-500,
color-basic-transparent-active-border: color-basic-500,
color-basic-transparent-disabled-border: color-basic-transparent-300,
color-primary-focus: color-primary-600,
color-primary-hover: color-primary-400,
color-primary-default: color-primary-500,
color-primary-active: color-primary-600,
color-primary-disabled: color-basic-transparent-300,
color-primary-focus-border: color-primary-700,
color-primary-hover-border: color-primary-hover,
color-primary-default-border: color-primary-default,
color-primary-active-border: color-primary-active,
color-primary-disabled-border: color-primary-disabled,
color-primary-transparent-focus: color-primary-transparent-300,
color-primary-transparent-hover: color-primary-transparent-200,
color-primary-transparent-default: color-primary-transparent-100,
color-primary-transparent-active: color-primary-transparent-300,
color-primary-transparent-disabled: color-basic-transparent-200,
color-primary-transparent-focus-border: color-primary-500,
color-primary-transparent-hover-border: color-primary-500,
color-primary-transparent-default-border: color-primary-500,
color-primary-transparent-active-border: color-primary-500,
color-primary-transparent-disabled-border: color-basic-transparent-300,
color-success-focus: color-success-600,
color-success-hover: color-success-400,
color-success-default: color-success-500,
color-success-active: color-success-600,
color-success-disabled: color-basic-transparent-300,
color-success-focus-border: color-success-700,
color-success-hover-border: color-success-hover,
color-success-default-border: color-success-default,
color-success-active-border: color-success-active,
color-success-disabled-border: color-success-disabled,
color-success-transparent-focus: color-success-transparent-300,
color-success-transparent-hover: color-success-transparent-200,
color-success-transparent-default: color-success-transparent-100,
color-success-transparent-active: color-success-transparent-300,
color-success-transparent-disabled: color-basic-transparent-200,
color-success-transparent-focus-border: color-success-500,
color-success-transparent-hover-border: color-success-500,
color-success-transparent-default-border: color-success-500,
color-success-transparent-active-border: color-success-500,
color-success-transparent-disabled-border: color-basic-transparent-300,
color-info-focus: color-info-600,
color-info-hover: color-info-400,
color-info-default: color-info-500,
color-info-active: color-info-600,
color-info-disabled: color-basic-transparent-300,
color-info-focus-border: color-info-700,
color-info-hover-border: color-info-hover,
color-info-default-border: color-info-default,
color-info-active-border: color-info-active,
color-info-disabled-border: color-info-disabled,
color-info-transparent-focus: color-info-transparent-300,
color-info-transparent-hover: color-info-transparent-200,
color-info-transparent-default: color-info-transparent-100,
color-info-transparent-active: color-info-transparent-300,
color-info-transparent-disabled: color-basic-transparent-200,
color-info-transparent-focus-border: color-info-500,
color-info-transparent-hover-border: color-info-500,
color-info-transparent-default-border: color-info-500,
color-info-transparent-active-border: color-info-500,
color-info-transparent-disabled-border: color-basic-transparent-300,
color-warning-focus: color-warning-600,
color-warning-hover: color-warning-400,
color-warning-default: color-warning-500,
color-warning-active: color-warning-600,
color-warning-disabled: color-basic-transparent-300,
color-warning-focus-border: color-warning-700,
color-warning-hover-border: color-warning-hover,
color-warning-default-border: color-warning-default,
color-warning-active-border: color-warning-active,
color-warning-disabled-border: color-warning-disabled,
color-warning-transparent-focus: color-warning-transparent-300,
color-warning-transparent-hover: color-warning-transparent-200,
color-warning-transparent-default: color-warning-transparent-100,
color-warning-transparent-active: color-warning-transparent-300,
color-warning-transparent-disabled: color-basic-transparent-200,
color-warning-transparent-focus-border: color-warning-500,
color-warning-transparent-hover-border: color-warning-500,
color-warning-transparent-default-border: color-warning-500,
color-warning-transparent-active-border: color-warning-500,
color-warning-transparent-disabled-border: color-basic-transparent-300,
color-danger-focus: color-danger-600,
color-danger-hover: color-danger-400,
color-danger-default: color-danger-500,
color-danger-active: color-danger-600,
color-danger-disabled: color-basic-transparent-300,
color-danger-focus-border: color-danger-700,
color-danger-hover-border: color-danger-hover,
color-danger-default-border: color-danger-default,
color-danger-active-border: color-danger-active,
color-danger-disabled-border: color-danger-disabled,
color-danger-transparent-focus: color-danger-transparent-300,
color-danger-transparent-hover: color-danger-transparent-200,
color-danger-transparent-default: color-danger-transparent-100,
color-danger-transparent-active: color-danger-transparent-300,
color-danger-transparent-disabled: color-basic-transparent-200,
color-danger-transparent-focus-border: color-danger-500,
color-danger-transparent-hover-border: color-danger-500,
color-danger-transparent-default-border: color-danger-500,
color-danger-transparent-active-border: color-danger-500,
color-danger-transparent-disabled-border: color-basic-transparent-300,
color-control-focus: color-basic-300,
color-control-hover: color-basic-200,
color-control-default: color-basic-100,
color-control-active: color-basic-300,
color-control-disabled: color-basic-transparent-300,
color-control-focus-border: color-basic-500,
color-control-hover-border: color-control-hover,
color-control-default-border: color-control-default,
color-control-active-border: color-control-active,
color-control-disabled-border: color-control-disabled,
color-control-transparent-focus: color-basic-control-transparent-300,
color-control-transparent-hover: color-basic-control-transparent-200,
color-control-transparent-default: color-basic-control-transparent-100,
color-control-transparent-active: color-basic-control-transparent-300,
color-control-transparent-disabled: color-basic-transparent-200,
color-control-transparent-focus-border: color-basic-100,
color-control-transparent-hover-border: color-basic-100,
color-control-transparent-default-border: color-basic-100,
color-control-transparent-active-border: color-basic-100,
color-control-transparent-disabled-border: color-basic-transparent-300,
background-basic-color-1: color-basic-1000,
background-basic-color-2: color-basic-1000,
background-basic-color-3: color-basic-900,
background-basic-color-4: color-basic-1100,
background-alternative-color-1: color-basic-100,
background-alternative-color-2: color-basic-200,
background-alternative-color-3: color-basic-300,
background-alternative-color-4: color-basic-400,
border-basic-color-1: color-basic-800,
border-basic-color-2: color-basic-900,
border-basic-color-3: color-basic-1000,
border-basic-color-4: color-basic-1100,
border-basic-color-5: color-basic-1100,
border-alternative-color-1: color-basic-100,
border-alternative-color-2: color-basic-200,
border-alternative-color-3: color-basic-300,
border-alternative-color-4: color-basic-400,
border-alternative-color-5: color-basic-500,
border-primary-color-1: color-primary-500,
border-primary-color-2: color-primary-600,
border-primary-color-3: color-primary-700,
border-primary-color-4: color-primary-800,
border-primary-color-5: color-primary-900,
border-success-color-1: color-success-500,
border-success-color-2: color-success-600,
border-success-color-3: color-success-700,
border-success-color-4: color-success-800,
border-success-color-5: color-success-900,
border-info-color-1: color-info-500,
border-info-color-2: color-info-600,
border-info-color-3: color-info-700,
border-info-color-4: color-info-800,
border-info-color-5: color-info-900,
border-warning-color-1: color-warning-500,
border-warning-color-2: color-warning-600,
border-warning-color-3: color-warning-700,
border-warning-color-4: color-warning-800,
border-warning-color-5: color-warning-900,
border-danger-color-1: color-danger-500,
border-danger-color-2: color-danger-600,
border-danger-color-3: color-danger-700,
border-danger-color-4: color-danger-800,
border-danger-color-5: color-danger-900,
text-basic-color: color-basic-100,
text-alternate-color: color-basic-900,
text-control-color: color-basic-100,
text-disabled-color: color-basic-transparent-600,
text-hint-color: color-basic-600,
text-primary-color: color-primary-default,
text-primary-focus-color: color-primary-focus,
text-primary-hover-color: color-primary-hover,
text-primary-active-color: color-primary-active,
text-primary-disabled-color: color-primary-400,
text-success-color: color-success-default,
text-success-focus-color: color-success-focus,
text-success-hover-color: color-success-hover,
text-success-active-color: color-success-active,
text-success-disabled-color: color-success-400,
text-info-color: color-info-default,
text-info-focus-color: color-info-focus,
text-info-hover-color: color-info-hover,
text-info-active-color: color-info-active,
text-info-disabled-color: color-info-400,
text-warning-color: color-warning-default,
text-warning-focus-color: color-warning-focus,
text-warning-hover-color: color-warning-hover,
text-warning-active-color: color-warning-active,
text-warning-disabled-color: color-warning-400,
text-danger-color: color-danger-default,
text-danger-focus-color: color-danger-focus,
text-danger-hover-color: color-danger-hover,
text-danger-active-color: color-danger-active,
text-danger-disabled-color: color-danger-400,
font-family-primary: unquote('Roboto, sans-serif'),
shadow: unquote(
'0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)'
),
card-shadow: shadow,
header-shadow: unquote(
'0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)'
),
header-background-color: color-primary-default,
footer-background-color: color-primary-default,
header-text-color: text-basic-color,
footer-text-color: text-basic-color,
footer-text-highlight-color: footer-text-color,
sidebar-background-color: background-basic-color-2,
material-regular-font-weight: 400,
menu-text-font-weight: material-regular-font-weight,
menu-text-color: rgba(255, 255, 255, 0.7),
menu-item-hover-text-color: rgba(255, 255, 255, 0.7),
menu-item-hover-background-color: rgba(255, 255, 255, 0.04),
menu-item-active-background-color: rgba(0, 0, 0, 0.25),
menu-item-icon-color: rgba(255, 255, 255, 0.7),
menu-item-icon-hover-color: rgba(255, 255, 255, 0.7),
menu-submenu-item-hover-background-color: rgba(255, 255, 255, 0.04),
menu-submenu-item-active-hover-background-color: rgba(255, 255, 255, 0.1),
menu-submenu-item-active-background-color: rgba(0, 0, 0, 0.25),
card-border-style: none,
card-background-color: color-basic-800,
card-divider-color: color-basic-700,
input-border-width: 1px,
input-basic-border-color: rgba(255, 255, 255, 0.7),
input-basic-focus-border-color: color-primary-focus,
input-basic-disabled-border-color: input-basic-border-color,
input-basic-hover-border-color: input-basic-border-color,
input-basic-background-color: transparent,
input-basic-focus-background-color: transparent,
input-basic-disabled-background-color: transparent,
input-basic-hover-background-color: transparent,
input-rectangle-border-radius: 0.25rem,
input-semi-round-border-radius: 0.25rem,
input-round-border-radius: 0.25rem,
input-medium-padding: 0.75rem 1rem,
input-large-padding: 1rem 1rem,
input-small-text-font-weight: text-paragraph-font-weight,
input-medium-text-font-weight: text-paragraph-font-weight,
input-large-text-font-weight: text-paragraph-font-weight,
input-primary-background-color: input-basic-background-color,
input-primary-focus-background-color: input-basic-focus-background-color,
input-primary-disabled-background-color: input-basic-disabled-background-color,
input-primary-hover-background-color: input-basic-hover-background-color,
input-info-background-color: input-basic-background-color,
input-info-focus-background-color: input-basic-focus-background-color,
input-info-disabled-background-color: input-basic-disabled-background-color,
input-info-hover-background-color: input-basic-hover-background-color,
input-success-background-color: input-basic-background-color,
input-success-focus-background-color: input-basic-focus-background-color,
input-success-disabled-background-color: input-basic-disabled-background-color,
input-success-hover-background-color: input-basic-hover-background-color,
input-warning-background-color: input-basic-background-color,
input-warning-focus-background-color: input-basic-focus-background-color,
input-warning-disabled-background-color: input-basic-disabled-background-color,
input-warning-hover-background-color: input-basic-hover-background-color,
input-danger-background-color: input-basic-background-color,
input-danger-focus-background-color: input-basic-focus-background-color,
input-danger-disabled-background-color: input-basic-disabled-background-color,
input-danger-hover-background-color: input-basic-hover-background-color,
input-control-background-color: input-basic-background-color,
input-control-focus-background-color: input-basic-focus-background-color,
input-control-disabled-background-color: input-basic-disabled-background-color,
input-control-hover-background-color: input-basic-hover-background-color,
select-tiny-text-font-weight: material-regular-font-weight,
select-small-text-font-weight: material-regular-font-weight,
select-medium-text-font-weight: material-regular-font-weight,
select-large-text-font-weight: material-regular-font-weight,
select-giant-text-font-weight: material-regular-font-weight,
select-rectangle-border-radius: 0,
select-semi-round-border-radius: 0,
select-round-border-radius: 0,
select-outline-border-width: 0 0 1px 0,
select-outline-basic-border-color: rgba(255, 255, 255, 0.7),
select-outline-basic-focus-border-color: color-primary-focus,
select-outline-basic-hover-border-color: select-outline-basic-border-color,
select-outline-basic-disabled-border-color: select-outline-basic-border-color,
select-outline-basic-background-color: transparent,
select-outline-basic-focus-background-color: transparent,
select-outline-basic-hover-background-color: transparent,
select-outline-basic-disabled-background-color: transparent,
select-outline-primary-background-color: select-outline-basic-background-color,
select-outline-primary-focus-background-color: select-outline-basic-focus-background-color,
select-outline-primary-hover-background-color: select-outline-basic-hover-background-color,
select-outline-primary-disabled-background-color: select-outline-basic-disabled-background-color,
select-outline-success-background-color: select-outline-basic-background-color,
select-outline-success-focus-background-color: select-outline-basic-focus-background-color,
select-outline-success-hover-background-color: select-outline-basic-hover-background-color,
select-outline-success-disabled-background-color: select-outline-basic-disabled-background-color,
select-outline-info-background-color: select-outline-basic-background-color,
select-outline-info-focus-background-color: select-outline-basic-focus-background-color,
select-outline-info-hover-background-color: select-outline-basic-hover-background-color,
select-outline-info-disabled-background-color: select-outline-basic-disabled-background-color,
select-outline-warning-background-color: select-outline-basic-background-color,
select-outline-warning-focus-background-color: select-outline-basic-focus-background-color,
select-outline-warning-hover-background-color: select-outline-basic-hover-background-color,
select-outline-warning-disabled-background-color: select-outline-basic-disabled-background-color,
select-outline-danger-background-color: select-outline-basic-background-color,
select-outline-danger-focus-background-color: select-outline-basic-focus-background-color,
select-outline-danger-hover-background-color: select-outline-basic-hover-background-color,
select-outline-danger-disabled-background-color: select-outline-basic-disabled-background-color,
select-outline-control-background-color: select-outline-basic-background-color,
select-outline-control-focus-background-color: select-outline-basic-focus-background-color,
select-outline-control-hover-background-color: select-outline-basic-hover-background-color,
select-outline-control-disabled-background-color: select-outline-basic-disabled-background-color,
option-list-shadow: shadow,
option-list-border-style: none,
option-list-adjacent-border-style: none,
option-background-color: color-basic-700,
option-hover-background-color: #4a4a4a,
option-focus-background-color: option-hover-background-color,
option-selected-background-color: #525252,
option-selected-hover-background-color: option-selected-background-color,
option-selected-focus-background-color: option-selected-background-color,
option-selected-text-color: text-primary-color,
option-selected-hover-text-color: text-primary-color,
option-selected-focus-text-color: text-primary-color,
option-tiny-text-font-weight: material-regular-font-weight,
option-small-text-font-weight: material-regular-font-weight,
option-medium-text-font-weight: material-regular-font-weight,
option-large-text-font-weight: material-regular-font-weight,
option-giant-text-font-weight: material-regular-font-weight
);
$nb-themes: nb-register-theme($theme, material-dark, dark);

497
src/app/@theme/styles/material/_material-light.scss Normal file
View file

@ -0,0 +1,497 @@
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@import '~@nebular/theme/styles/core/functions';
@import '~@nebular/theme/styles/core/mixins';
$theme: (
color-primary-100: #e8cbfe,
color-primary-200: #ce97fd,
color-primary-300: #ae63f9,
color-primary-400: #903df4,
color-primary-500: #6200ee,
color-primary-600: #4b00cc,
color-primary-700: #3800ab,
color-primary-800: #27008a,
color-primary-900: #1b0072,
color-primary-transparent-100: rgba(98, 0, 238, 0.08),
color-primary-transparent-200: rgba(98, 0, 238, 0.16),
color-primary-transparent-300: rgba(98, 0, 238, 0.24),
color-primary-transparent-400: rgba(98, 0, 238, 0.32),
color-primary-transparent-500: rgba(98, 0, 238, 0.4),
color-primary-transparent-600: rgba(98, 0, 238, 0.48),
color-success-100: #edfbd1,
color-success-200: #d7f7a6,
color-success-300: #b4e775,
color-success-400: #8fcf50,
color-success-500: #60af20,
color-success-600: #499617,
color-success-700: #357d10,
color-success-800: #24650a,
color-success-900: #175306,
color-success-transparent-100: rgba(96, 175, 32, 0.08),
color-success-transparent-200: rgba(96, 175, 32, 0.16),
color-success-transparent-300: rgba(96, 175, 32, 0.24),
color-success-transparent-400: rgba(96, 175, 32, 0.32),
color-success-transparent-500: rgba(96, 175, 32, 0.4),
color-success-transparent-600: rgba(96, 175, 32, 0.48),
color-info-100: #ccf7fe,
color-info-200: #99e9fd,
color-info-300: #66d3f9,
color-info-400: #40bbf4,
color-info-500: #0495ee,
color-info-600: #0273cc,
color-info-700: #0256ab,
color-info-800: #013d8a,
color-info-900: #002b72,
color-info-transparent-100: rgba(4, 149, 238, 0.08),
color-info-transparent-200: rgba(4, 149, 238, 0.16),
color-info-transparent-300: rgba(4, 149, 238, 0.24),
color-info-transparent-400: rgba(4, 149, 238, 0.32),
color-info-transparent-500: rgba(4, 149, 238, 0.4),
color-info-transparent-600: rgba(4, 149, 238, 0.48),
color-warning-100: #fff3cd,
color-warning-200: #ffe49b,
color-warning-300: #ffd169,
color-warning-400: #ffbe43,
color-warning-500: #ff9f05,
color-warning-600: #db8003,
color-warning-700: #b76302,
color-warning-800: #934a01,
color-warning-900: #7a3800,
color-warning-transparent-100: rgba(255, 159, 5, 0.08),
color-warning-transparent-200: rgba(255, 159, 5, 0.16),
color-warning-transparent-300: rgba(255, 159, 5, 0.24),
color-warning-transparent-400: rgba(255, 159, 5, 0.32),
color-warning-transparent-500: rgba(255, 159, 5, 0.4),
color-warning-transparent-600: rgba(255, 159, 5, 0.48),
color-danger-100: #fbd2c8,
color-danger-200: #f79e94,
color-danger-300: #e75d5c,
color-danger-400: #cf3341,
color-danger-500: #b00020,
color-danger-600: #970029,
color-danger-700: #7e002e,
color-danger-800: #66002f,
color-danger-900: #54002f,
color-danger-transparent-100: rgba(176, 0, 32, 0.08),
color-danger-transparent-200: rgba(176, 0, 32, 0.16),
color-danger-transparent-300: rgba(176, 0, 32, 0.24),
color-danger-transparent-400: rgba(176, 0, 32, 0.32),
color-danger-transparent-500: rgba(176, 0, 32, 0.4),
color-danger-transparent-600: rgba(176, 0, 32, 0.48),
color-basic-100: #ffffff,
color-basic-200: #f5f5f5,
color-basic-300: #ebebeb,
color-basic-400: #e0e0e0,
color-basic-500: #b3b3b3,
color-basic-600: #838383,
color-basic-700: #636363,
color-basic-800: #424242,
color-basic-900: #242424,
color-basic-1000: #1b1b1b,
color-basic-1100: #000000,
color-basic-transparent-100: rgba(131, 131, 131, 0.08),
color-basic-transparent-200: rgba(131, 131, 131, 0.16),
color-basic-transparent-300: rgba(131, 131, 131, 0.24),
color-basic-transparent-400: rgba(131, 131, 131, 0.32),
color-basic-transparent-500: rgba(131, 131, 131, 0.4),
color-basic-transparent-600: rgba(131, 131, 131, 0.48),
color-basic-control-transparent-100: rgba(255, 255, 255, 0.08),
color-basic-control-transparent-200: rgba(255, 255, 255, 0.16),
color-basic-control-transparent-300: rgba(255, 255, 255, 0.24),
color-basic-control-transparent-400: rgba(255, 255, 255, 0.32),
color-basic-control-transparent-500: rgba(255, 255, 255, 0.4),
color-basic-control-transparent-600: rgba(255, 255, 255, 0.48),
color-basic-focus: color-basic-400,
color-basic-hover: color-basic-200,
color-basic-default: color-basic-300,
color-basic-active: color-basic-400,
color-basic-disabled: color-basic-transparent-300,
color-basic-focus-border: color-basic-500,
color-basic-hover-border: color-basic-hover,
color-basic-default-border: color-basic-default,
color-basic-active-border: color-basic-active,
color-basic-disabled-border: color-basic-disabled,
color-basic-transparent-focus: color-basic-transparent-300,
color-basic-transparent-hover: color-basic-transparent-200,
color-basic-transparent-default: color-basic-transparent-100,
color-basic-transparent-active: color-basic-transparent-300,
color-basic-transparent-disabled: color-basic-transparent-200,
color-basic-transparent-focus-border: color-basic-500,
color-basic-transparent-hover-border: color-basic-500,
color-basic-transparent-default-border: color-basic-500,
color-basic-transparent-active-border: color-basic-500,
color-basic-transparent-disabled-border: color-basic-transparent-300,
color-primary-focus: color-primary-600,
color-primary-hover: color-primary-400,
color-primary-default: color-primary-500,
color-primary-active: color-primary-600,
color-primary-disabled: color-basic-transparent-300,
color-primary-focus-border: color-primary-700,
color-primary-hover-border: color-primary-hover,
color-primary-default-border: color-primary-default,
color-primary-active-border: color-primary-active,
color-primary-disabled-border: color-primary-disabled,
color-primary-transparent-focus: color-primary-transparent-300,
color-primary-transparent-hover: color-primary-transparent-200,
color-primary-transparent-default: color-primary-transparent-100,
color-primary-transparent-active: color-primary-transparent-300,
color-primary-transparent-disabled: color-basic-transparent-200,
color-primary-transparent-focus-border: color-primary-500,
color-primary-transparent-hover-border: color-primary-500,
color-primary-transparent-default-border: color-primary-500,
color-primary-transparent-active-border: color-primary-500,
color-primary-transparent-disabled-border: color-basic-transparent-300,
color-success-focus: color-success-600,
color-success-hover: color-success-400,
color-success-default: color-success-500,
color-success-active: color-success-600,
color-success-disabled: color-basic-transparent-300,
color-success-focus-border: color-success-700,
color-success-hover-border: color-success-hover,
color-success-default-border: color-success-default,
color-success-active-border: color-success-active,
color-success-disabled-border: color-success-disabled,
color-success-transparent-focus: color-success-transparent-300,
color-success-transparent-hover: color-success-transparent-200,
color-success-transparent-default: color-success-transparent-100,
color-success-transparent-active: color-success-transparent-300,
color-success-transparent-disabled: color-basic-transparent-200,
color-success-transparent-focus-border: color-success-500,
color-success-transparent-hover-border: color-success-500,
color-success-transparent-default-border: color-success-500,
color-success-transparent-active-border: color-success-500,
color-success-transparent-disabled-border: color-basic-transparent-300,
color-info-focus: color-info-600,
color-info-hover: color-info-400,
color-info-default: color-info-500,
color-info-active: color-info-600,
color-info-disabled: color-basic-transparent-300,
color-info-focus-border: color-info-700,
color-info-hover-border: color-info-hover,
color-info-default-border: color-info-default,
color-info-active-border: color-info-active,
color-info-disabled-border: color-info-disabled,
color-info-transparent-focus: color-info-transparent-300,
color-info-transparent-hover: color-info-transparent-200,
color-info-transparent-default: color-info-transparent-100,
color-info-transparent-active: color-info-transparent-300,
color-info-transparent-disabled: color-basic-transparent-200,
color-info-transparent-focus-border: color-info-500,
color-info-transparent-hover-border: color-info-500,
color-info-transparent-default-border: color-info-500,
color-info-transparent-active-border: color-info-500,
color-info-transparent-disabled-border: color-basic-transparent-300,
color-warning-focus: color-warning-600,
color-warning-hover: color-warning-400,
color-warning-default: color-warning-500,
color-warning-active: color-warning-600,
color-warning-disabled: color-basic-transparent-300,
color-warning-focus-border: color-warning-700,
color-warning-hover-border: color-warning-hover,
color-warning-default-border: color-warning-default,
color-warning-active-border: color-warning-active,
color-warning-disabled-border: color-warning-disabled,
color-warning-transparent-focus: color-warning-transparent-300,
color-warning-transparent-hover: color-warning-transparent-200,
color-warning-transparent-default: color-warning-transparent-100,
color-warning-transparent-active: color-warning-transparent-300,
color-warning-transparent-disabled: color-basic-transparent-200,
color-warning-transparent-focus-border: color-warning-500,
color-warning-transparent-hover-border: color-warning-500,
color-warning-transparent-default-border: color-warning-500,
color-warning-transparent-active-border: color-warning-500,
color-warning-transparent-disabled-border: color-basic-transparent-300,
color-danger-focus: color-danger-600,
color-danger-hover: color-danger-400,
color-danger-default: color-danger-500,
color-danger-active: color-danger-600,
color-danger-disabled: color-basic-transparent-300,
color-danger-focus-border: color-danger-700,
color-danger-hover-border: color-danger-hover,
color-danger-default-border: color-danger-default,
color-danger-active-border: color-danger-active,
color-danger-disabled-border: color-danger-disabled,
color-danger-transparent-focus: color-danger-transparent-300,
color-danger-transparent-hover: color-danger-transparent-200,
color-danger-transparent-default: color-danger-transparent-100,
color-danger-transparent-active: color-danger-transparent-300,
color-danger-transparent-disabled: color-basic-transparent-200,
color-danger-transparent-focus-border: color-danger-500,
color-danger-transparent-hover-border: color-danger-500,
color-danger-transparent-default-border: color-danger-500,
color-danger-transparent-active-border: color-danger-500,
color-danger-transparent-disabled-border: color-basic-transparent-300,
color-control-focus: color-basic-300,
color-control-hover: color-basic-200,
color-control-default: color-basic-100,
color-control-active: color-basic-300,
color-control-disabled: color-basic-transparent-300,
color-control-focus-border: color-basic-500,
color-control-hover-border: color-control-hover,
color-control-default-border: color-control-default,
color-control-active-border: color-control-active,
color-control-disabled-border: color-control-disabled,
color-control-transparent-focus: color-basic-control-transparent-300,
color-control-transparent-hover: color-basic-control-transparent-200,
color-control-transparent-default: color-basic-control-transparent-100,
color-control-transparent-active: color-basic-control-transparent-300,
color-control-transparent-disabled: color-basic-transparent-200,
color-control-transparent-focus-border: color-basic-100,
color-control-transparent-hover-border: color-basic-100,
color-control-transparent-default-border: color-basic-100,
color-control-transparent-active-border: color-basic-100,
color-control-transparent-disabled-border: color-basic-transparent-300,
background-basic-color-1: color-basic-100,
background-basic-color-2: color-basic-300,
background-basic-color-3: #fafafa,
background-basic-color-4: color-basic-400,
background-alternative-color-1: color-basic-800,
background-alternative-color-2: color-basic-900,
background-alternative-color-3: color-basic-1000,
background-alternative-color-4: color-basic-1100,
border-basic-color-1: color-basic-100,
border-basic-color-2: color-basic-200,
border-basic-color-3: color-basic-300,
border-basic-color-4: color-basic-400,
border-basic-color-5: color-basic-500,
border-alternative-color-1: color-basic-800,
border-alternative-color-2: color-basic-900,
border-alternative-color-3: color-basic-1000,
border-alternative-color-4: color-basic-1100,
border-alternative-color-5: color-basic-1100,
border-primary-color-1: color-primary-500,
border-primary-color-2: color-primary-600,
border-primary-color-3: color-primary-700,
border-primary-color-4: color-primary-800,
border-primary-color-5: color-primary-900,
border-success-color-1: color-success-500,
border-success-color-2: color-success-600,
border-success-color-3: color-success-700,
border-success-color-4: color-success-800,
border-success-color-5: color-success-900,
border-info-color-1: color-info-500,
border-info-color-2: color-info-600,
border-info-color-3: color-info-700,
border-info-color-4: color-info-800,
border-info-color-5: color-info-900,
border-warning-color-1: color-warning-500,
border-warning-color-2: color-warning-600,
border-warning-color-3: color-warning-700,
border-warning-color-4: color-warning-800,
border-warning-color-5: color-warning-900,
border-danger-color-1: color-danger-500,
border-danger-color-2: color-danger-600,
border-danger-color-3: color-danger-700,
border-danger-color-4: color-danger-800,
border-danger-color-5: color-danger-900,
text-basic-color: color-basic-800,
text-alternate-color: color-basic-100,
text-control-color: color-basic-100,
text-disabled-color: color-basic-transparent-600,
text-hint-color: color-basic-600,
text-primary-color: color-primary-default,
text-primary-focus-color: color-primary-focus,
text-primary-hover-color: color-primary-hover,
text-primary-active-color: color-primary-active,
text-primary-disabled-color: color-primary-400,
text-success-color: color-success-default,
text-success-focus-color: color-success-focus,
text-success-hover-color: color-success-hover,
text-success-active-color: color-success-active,
text-success-disabled-color: color-success-400,
text-info-color: color-info-default,
text-info-focus-color: color-info-focus,
text-info-hover-color: color-info-hover,
text-info-active-color: color-info-active,
text-info-disabled-color: color-info-400,
text-warning-color: color-warning-default,
text-warning-focus-color: color-warning-focus,
text-warning-hover-color: color-warning-hover,
text-warning-active-color: color-warning-active,
text-warning-disabled-color: color-warning-400,
text-danger-color: color-danger-default,
text-danger-focus-color: color-danger-focus,
text-danger-hover-color: color-danger-hover,
text-danger-active-color: color-danger-active,
text-danger-disabled-color: color-danger-400,
font-family-primary: unquote('Roboto, sans-serif'),
shadow: unquote('0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'),
card-shadow: shadow,
header-shadow: unquote(
'0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12)'
),
header-background-color: color-primary-default,
footer-background-color: color-primary-default,
header-text-color: text-alternate-color,
footer-text-color: text-alternate-color,
footer-text-highlight-color: footer-text-color,
sidebar-background-color: background-basic-color-2,
menu-text-font-weight: 400,
menu-text-color: rgba(0, 0, 0, 0.87),
menu-item-hover-text-color: rgba(0, 0, 0, 0.87),
menu-item-hover-background-color: rgba(0, 0, 0, 0.04),
menu-item-active-background-color: rgba(0, 0, 0, 0.08),
menu-item-icon-color: rgba(0, 0, 0, 0.87),
menu-item-icon-hover-color: rgba(0, 0, 0, 0.87),
menu-submenu-item-hover-background-color: rgba(0, 0, 0, 0.04),
menu-submenu-item-active-hover-background-color: rgba(0, 0, 0, 0.1),
menu-submenu-item-active-background-color: rgba(0, 0, 0, 0.08),
card-border-style: none,
card-divider-color: color-basic-200,
input-border-width: 1px,
input-basic-border-color: rgba(0, 0, 0, 0.42),
input-basic-focus-border-color: color-primary-focus,
input-basic-disabled-border-color: rgba(0, 0, 0, 0.42),
input-basic-hover-border-color: rgba(0, 0, 0, 0.42),
input-basic-background-color: transparent,
input-basic-focus-background-color: transparent,
input-basic-disabled-background-color: transparent,
input-basic-hover-background-color: transparent,
input-rectangle-border-radius: 0.25rem,
input-semi-round-border-radius: 0.25rem,
input-round-border-radius: 0.25rem,
input-medium-padding: 0.75rem 1rem,
input-large-padding: 1rem 1rem,
input-small-text-font-weight: text-paragraph-font-weight,
input-medium-text-font-weight: text-paragraph-font-weight,
input-large-text-font-weight: text-paragraph-font-weight,
input-primary-background-color: input-basic-background-color,
input-primary-focus-background-color: input-basic-focus-background-color,
input-primary-disabled-background-color: input-basic-disabled-background-color,
input-primary-hover-background-color: input-basic-hover-background-color,
input-info-background-color: input-basic-background-color,
input-info-focus-background-color: input-basic-focus-background-color,
input-info-disabled-background-color: input-basic-disabled-background-color,
input-info-hover-background-color: input-basic-hover-background-color,
input-success-background-color: input-basic-background-color,
input-success-focus-background-color: input-basic-focus-background-color,
input-success-disabled-background-color: input-basic-disabled-background-color,
input-success-hover-background-color: input-basic-hover-background-color,
input-warning-background-color: input-basic-background-color,
input-warning-focus-background-color: input-basic-focus-background-color,
input-warning-disabled-background-color: input-basic-disabled-background-color,
input-warning-hover-background-color: input-basic-hover-background-color,
input-danger-background-color: input-basic-background-color,
input-danger-focus-background-color: input-basic-focus-background-color,
input-danger-disabled-background-color: input-basic-disabled-background-color,
input-danger-hover-background-color: input-basic-hover-background-color,
input-control-background-color: input-basic-background-color,
input-control-focus-background-color: input-basic-focus-background-color,
input-control-disabled-background-color: input-basic-disabled-background-color,
input-control-hover-background-color: input-basic-hover-background-color,
select-tiny-text-font-weight: material-regular-font-weight,
select-small-text-font-weight: material-regular-font-weight,
select-medium-text-font-weight: material-regular-font-weight,
select-large-text-font-weight: material-regular-font-weight,
select-giant-text-font-weight: material-regular-font-weight,
select-rectangle-border-radius: 0,
select-semi-round-border-radius: 0,
select-round-border-radius: 0,
select-outline-border-width: 0 0 1px 0,
select-outline-basic-border-color: rgba(0, 0, 0, 0.42),
select-outline-basic-focus-border-color: color-primary-focus,
select-outline-basic-hover-border-color: select-outline-basic-border-color,
select-outline-basic-disabled-border-color: select-outline-basic-border-color,
select-outline-basic-background-color: transparent,
select-outline-basic-focus-background-color: transparent,
select-outline-basic-hover-background-color: transparent,
select-outline-basic-disabled-background-color: transparent,
select-outline-primary-background-color: select-outline-basic-background-color,
select-outline-primary-focus-background-color: select-outline-basic-focus-background-color,
select-outline-primary-hover-background-color: select-outline-basic-hover-background-color,
select-outline-primary-disabled-background-color: select-outline-basic-disabled-background-color,
select-outline-success-background-color: select-outline-basic-background-color,
select-outline-success-focus-background-color: select-outline-basic-focus-background-color,
select-outline-success-hover-background-color: select-outline-basic-hover-background-color,
select-outline-success-disabled-background-color: select-outline-basic-disabled-background-color,
select-outline-info-background-color: select-outline-basic-background-color,
select-outline-info-focus-background-color: select-outline-basic-focus-background-color,
select-outline-info-hover-background-color: select-outline-basic-hover-background-color,
select-outline-info-disabled-background-color: select-outline-basic-disabled-background-color,
select-outline-warning-background-color: select-outline-basic-background-color,
select-outline-warning-focus-background-color: select-outline-basic-focus-background-color,
select-outline-warning-hover-background-color: select-outline-basic-hover-background-color,
select-outline-warning-disabled-background-color: select-outline-basic-disabled-background-color,
select-outline-danger-background-color: select-outline-basic-background-color,
select-outline-danger-focus-background-color: select-outline-basic-focus-background-color,
select-outline-danger-hover-background-color: select-outline-basic-hover-background-color,
select-outline-danger-disabled-background-color: select-outline-basic-disabled-background-color,
select-outline-control-background-color: select-outline-basic-background-color,
select-outline-control-focus-background-color: select-outline-basic-focus-background-color,
select-outline-control-hover-background-color: select-outline-basic-hover-background-color,
select-outline-control-disabled-background-color: select-outline-basic-disabled-background-color,
option-list-shadow: shadow,
option-list-border-style: none,
option-list-adjacent-border-style: none,
option-background-color: color-basic-100,
option-hover-background-color: color-basic-200,
option-focus-background-color: option-hover-background-color,
option-selected-background-color: color-basic-300,
option-selected-hover-background-color: option-selected-background-color,
option-selected-focus-background-color: option-selected-background-color,
option-selected-text-color: text-primary-color,
option-selected-hover-text-color: text-primary-color,
option-selected-focus-text-color: text-primary-color,
option-tiny-text-font-weight: material-regular-font-weight,
option-small-text-font-weight: material-regular-font-weight,
option-medium-text-font-weight: material-regular-font-weight,
option-large-text-font-weight: material-regular-font-weight,
option-giant-text-font-weight: material-regular-font-weight
);
$nb-themes: nb-register-theme($theme, material-light, default);

44
src/app/@theme/styles/material/_material-overrides.scss Normal file
View file

@ -0,0 +1,44 @@
@mixin material-overrides() {
@include nb-for-themes(material-dark, material-light) {
nb-layout-header {
nb-actions, .logo-container {
nb-icon, .user-name {
color: nb-theme(color-basic-100) !important;
}
}
.select-button {
background-color: nb-theme(background-basic-color-3) !important;
}
}
nb-sidebar {
transition: width 0.3s;
.main-container {
transition: width 0.3s;
}
}
nb-card {
border-bottom-left-radius: 0.125rem;
border-bottom-right-radius: 0.125rem;
nb-card-header, .tabset {
background-color: nb-theme(card-divider-color);
}
}
[nbinput] {
font-weight: 400;
&.status-basic:focus:hover {
border-color: nb-theme(color-primary-focus) !important;
}
}
[nbbutton] {
box-shadow: none !important;
}
}
}

361
src/app/@theme/styles/material/theme.material-dark.ts Normal file
View file

@ -0,0 +1,361 @@
import { NbJSThemeOptions } from '@nebular/theme';
const palette = {
primary: '#e91d63',
success: '#60af20',
info: '#0495ee',
warning: '#ff9f05',
danger: '#b00020',
};
export const baseTheme: NbJSThemeOptions = {
name: 'material-dark',
base: 'dark',
variables: {
fontMain: 'Roboto, sans-serif',
fontSecondary: 'Roboto, sans-serif',
bg: '#383838',
bg2: '#292929',
bg3: '#1f1f1f',
bg4: '#141414',
border: '#383838',
border2: '#292929',
border3: '#1f1f1f',
border4: '#141414',
border5: '#141414',
fg: '#808080',
fgHeading: '#ffffff',
fgText: '#ffffff',
fgHighlight: palette.primary,
layoutBg: '#1f1f1f',
separator: '#1f1f1f',
primary: palette.primary,
success: palette.success,
info: palette.info,
warning: palette.warning,
danger: palette.danger,
primaryLight: '#f24681',
successLight: '#8fcf50',
infoLight: '#40bbf4',
warningLight: '#ffbe43',
dangerLight: '#cf3341',
},
};
const baseThemeVariables = baseTheme.variables;
export const MATERIAL_DARK_THEME = {
name: 'material-dark',
base: 'default',
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: '1',
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;

361
src/app/@theme/styles/material/theme.material-light.ts Normal file
View file

@ -0,0 +1,361 @@
import { NbJSThemeOptions } from '@nebular/theme';
const palette = {
primary: '#6200ee',
success: '#60af20',
info: '#0495ee',
warning: '#ff9f05',
danger: '#b00020',
};
export const baseTheme: NbJSThemeOptions = {
name: 'material-light',
base: 'default',
variables: {
fontMain: 'Roboto, sans-serif',
fontSecondary: 'Roboto, sans-serif',
bg: '#ffffff',
bg2: '#f5f5f5',
bg3: '#ebebeb',
bg4: '#e0e0e0',
border: '#ffffff',
border2: '#f5f5f5',
border3: '#ebebeb',
border4: '#e0e0e0',
border5: '#b3b3b3',
fg: '#838383',
fgHeading: '#1a2138',
fgText: '#1a2138',
fgHighlight: palette.primary,
layoutBg: '#ebebeb',
separator: '#ebebeb',
primary: palette.primary,
success: palette.success,
info: palette.info,
warning: palette.warning,
danger: palette.danger,
primaryLight: '#903df4',
successLight: '#8fcf50',
infoLight: '#40bbf4',
warningLight: '#ffbe43',
dangerLight: '#cf3341',
},
};
const baseThemeVariables = baseTheme.variables;
export const MATERIAL_LIGHT_THEME = {
name: 'material-light',
base: 'default',
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: '1',
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;

7
src/app/@theme/styles/styles.scss
View file

@ -1,4 +1,5 @@
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,600,700,800&display=swap');
// themes - our custom or/and out of the box themes
@import 'themes';
@ -12,15 +13,20 @@
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/grid';
@import './material/angular-material';
// loading progress bar theme
@import './pace.theme';
@import './layout';
@import './overrides';
@import './material/material-overrides';
// install the framework and custom global styles
@include nb-install() {
@include angular-material();
// framework global styles
@include nb-theme-global();
@include nb-auth-global();
@ -30,4 +36,5 @@
@include ngx-pace-theme();
@include nb-overrides();
@include material-overrides();
};

47
src/app/@theme/styles/themes.scss
View file

@ -2,6 +2,9 @@
@import '~@nebular/theme/styles/theming';
// @nebular out of the box themes
@import '~@nebular/theme/styles/themes';
// material themes
@import './material/material-dark';
@import './material/material-light';
$nb-themes: nb-register-theme((
layout-padding-top: 2.25rem,
@ -86,3 +89,47 @@ $nb-themes: nb-register-theme((
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
), dark, dark);
$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,
option-list-border-radius: 0,
slide-out-background: linear-gradient(270deg, #e0e0e0 0%, #ebebeb 100%),
slide-out-shadow-color: 0 4px 14px 0 #ebebeb,
slide-out-shadow-color-rtl: 0 4px 14px 0 #ebebeb,
), material-light, material-light);
$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,
option-list-border-radius: 0,
slide-out-background: linear-gradient(270deg, #1f1f1f 0%, #292929 100%),
slide-out-shadow-color: 0 4px 14px 0 #292929,
slide-out-shadow-color-rtl: 0 4px 14px 0 #292929,
), material-dark, material-dark);

13
src/app/@theme/theme.module.ts
View file

@ -1,5 +1,6 @@
import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatRippleModule } from '@angular/material/core';
import {
NbActionsModule,
NbLayoutModule,
@ -39,6 +40,8 @@ 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';
import { MATERIAL_LIGHT_THEME } from './styles/material/theme.material-light';
import { MATERIAL_DARK_THEME } from './styles/material/theme.material-dark';
const NB_MODULES = [
NbLayoutModule,
@ -73,20 +76,20 @@ const PIPES = [
];
@NgModule({
imports: [CommonModule, ...NB_MODULES],
exports: [CommonModule, ...PIPES, ...COMPONENTS],
imports: [CommonModule, MatRippleModule, ...NB_MODULES],
exports: [CommonModule, MatRippleModule, ...PIPES, ...COMPONENTS],
declarations: [...COMPONENTS, ...PIPES],
})
export class ThemeModule {
static forRoot(): ModuleWithProviders {
return <ModuleWithProviders>{
static forRoot(): ModuleWithProviders<ThemeModule> {
return {
ngModule: ThemeModule,
providers: [
...NbThemeModule.forRoot(
{
name: 'default',
},
[ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ],
[ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME, MATERIAL_LIGHT_THEME, MATERIAL_DARK_THEME ],
).providers,
],
};

4
src/app/app-routing.module.ts
View file

@ -9,10 +9,10 @@ import {
NbResetPasswordComponent,
} from '@nebular/auth';
const routes: Routes = [
export const routes: Routes = [
{
path: 'pages',
loadChildren: () => import('app/pages/pages.module')
loadChildren: () => import('./pages/pages.module')
.then(m => m.PagesModule),
},
{

0
src/assets/images/kitten-dark.png → src/assets/images/kitten-material-dark.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

Before After
Before After

BIN
src/assets/images/kitten-material-light.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
src/assets/images/material-dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
src/assets/images/material-light.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 MiB

10
src/tsconfig.app.json
View file

@ -2,15 +2,7 @@
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"paths": {
"@angular/*": [
"../node_modules/@angular/*"
],
"@nebular/*": [
"../node_modules/@nebular/*"
]
}
"baseUrl": "./"
},
"exclude": [
"test.ts",