From 43e63d3124c76df5c2d8bf8e36b9876e1ddc63c4 Mon Sep 17 00:00:00 2001 From: Dmitry Nehaychik <4dmitr@gmail.com> Date: Mon, 20 May 2019 18:45:39 +0300 Subject: [PATCH] feat(themes): add new Dark theme! --- .../live-example-block.component.scss | 13 +++- .../live-example-block.component.ts | 6 ++ docs/articles/auth-install.md | 2 +- docs/articles/bootstrap-integration.md | 3 +- docs/articles/concept-theme-system.md | 5 +- .../layout-theme-toggle.component.ts | 3 +- src/framework/theme/styles/_themes.scss | 1 + src/framework/theme/styles/prebuilt/dark.scss | 7 +++ .../theme/styles/themes/_cosmic.scss | 61 +------------------ src/framework/theme/styles/themes/_dark.scss | 42 +++++++++++++ .../theme/styles/themes/_default.scss | 13 ++-- 11 files changed, 84 insertions(+), 72 deletions(-) create mode 100644 src/framework/theme/styles/prebuilt/dark.scss create mode 100644 src/framework/theme/styles/themes/_dark.scss diff --git a/docs/app/blocks/components/live-example-block/live-example-block.component.scss b/docs/app/blocks/components/live-example-block/live-example-block.component.scss index 932ba41e07..1a1765d3a3 100644 --- a/docs/app/blocks/components/live-example-block/live-example-block.component.scss +++ b/docs/app/blocks/components/live-example-block/live-example-block.component.scss @@ -8,8 +8,10 @@ $action-fg: nb-theme(color-fg-heading-light); $block-bg-default: #f7f8fa; $block-bg-cosmic: #292766; - $block-bg-corporate: #f7f8fa; $block-fg-cosmic: #e8e9fa; + $block-bg-corporate: #f7f8fa; + $block-bg-dark: #232a39; + $block-fg-dark: #f7f8fa; display: flex; flex-direction: column; @@ -102,8 +104,13 @@ .title { color: white; } - .action-item { - color: $block-fg-cosmic; + } + + &.theme-dark { + background-color: $block-bg-dark; + + .title { + color: white; } } diff --git a/docs/app/blocks/components/live-example-block/live-example-block.component.ts b/docs/app/blocks/components/live-example-block/live-example-block.component.ts index ec47a707bb..18783fc880 100644 --- a/docs/app/blocks/components/live-example-block/live-example-block.component.ts +++ b/docs/app/blocks/components/live-example-block/live-example-block.component.ts @@ -45,11 +45,17 @@ export class NgdLiveExampleBlockComponent implements OnInit, AfterViewInit, OnDe return this.currentTheme === 'corporate'; } + @HostBinding('class.theme-dark') + private get isDark() { + return this.currentTheme === 'dark'; + } + iframeHeight = 0; alive: boolean = true; themes: {label: string; value: string}[] = [ { label: 'Default', value: 'default' }, + { label: 'Dark', value: 'dark' }, { label: 'Cosmic', value: 'cosmic' }, { label: 'Corporate', value: 'corporate' }, ]; diff --git a/docs/articles/auth-install.md b/docs/articles/auth-install.md index f3159bfcd2..66bd85d583 100644 --- a/docs/articles/auth-install.md +++ b/docs/articles/auth-install.md @@ -141,7 +141,7 @@ Last but not least - install the component styles into your styles.scss ([more d ``` -`@import '~@nebular/auth/styles/all'` means import auth styles for all themes (default, cosmic, corporate). If you have only one or portion of themes enabled, then you need to import auth styles only for enabled themes. For example, when only default and corporate themes enabled, auth imports should look like this: +`@import '~@nebular/auth/styles/all'` means import auth styles for all themes (default, dark, corporate, cosmic). If you have only one or portion of themes enabled, then you need to import auth styles only for enabled themes. For example, when only default and corporate themes enabled, auth imports should look like this: ```scss @import '~@nebular/auth/styles/themes/default'; @import '~@nebular/auth/styles/themes/corporate'; diff --git a/docs/articles/bootstrap-integration.md b/docs/articles/bootstrap-integration.md index c7d104cb22..d9dec61dda 100644 --- a/docs/articles/bootstrap-integration.md +++ b/docs/articles/bootstrap-integration.md @@ -29,9 +29,10 @@ Then if you just want to use predefined themes you have to import prebuilt style ```json "styles": [ - "node_modules/@nebular/bootstrap/styles/prebuilt/cosmic.css", + "node_modules/@nebular/bootstrap/styles/prebuilt/dark.css", "node_modules/@nebular/bootstrap/styles/prebuilt/default.css", "node_modules/@nebular/bootstrap/styles/prebuilt/corporate.css", + "node_modules/@nebular/bootstrap/styles/prebuilt/cosmic.css" ] ``` diff --git a/docs/articles/concept-theme-system.md b/docs/articles/concept-theme-system.md index 9cc7a5c219..c3c9e5715e 100644 --- a/docs/articles/concept-theme-system.md +++ b/docs/articles/concept-theme-system.md @@ -93,10 +93,11 @@ Depending on the currently enabled theme and the way `card-bg` inherited in your Currently, there are 3 built-in themes: - `default` - clean white theme -- `cosmic` - dark theme +- `dark` - dark theme +- `cosmic` - alternative dark violet theme - `corporate` - firm business theme -Themes can also be inherited from each other, `cosmic`, for instance, is inherited from the `default` theme. +Themes can also be inherited from each other, `cosmic`, for instance, is inherited from the `dark` theme.
## Magic of multiple themes with hot-reload diff --git a/src/app/layout-theme-toggle/layout-theme-toggle.component.ts b/src/app/layout-theme-toggle/layout-theme-toggle.component.ts index d26d54efcb..9c7c278d3e 100644 --- a/src/app/layout-theme-toggle/layout-theme-toggle.component.ts +++ b/src/app/layout-theme-toggle/layout-theme-toggle.component.ts @@ -6,8 +6,9 @@ import { NbThemeService } from '@nebular/theme'; styleUrls: ['./layout-theme-toggle.component.scss'], template: ` `, diff --git a/src/framework/theme/styles/_themes.scss b/src/framework/theme/styles/_themes.scss index b0475fe714..86c9908acb 100644 --- a/src/framework/theme/styles/_themes.scss +++ b/src/framework/theme/styles/_themes.scss @@ -1,3 +1,4 @@ @import 'themes/default'; +@import 'themes/dark'; @import 'themes/cosmic'; @import 'themes/corporate'; diff --git a/src/framework/theme/styles/prebuilt/dark.scss b/src/framework/theme/styles/prebuilt/dark.scss new file mode 100644 index 0000000000..ae1a3c52b1 --- /dev/null +++ b/src/framework/theme/styles/prebuilt/dark.scss @@ -0,0 +1,7 @@ +@import '../all'; + +$nb-enabled-themes: (dark); + +@include nb-install() { + @include nb-theme-global(); +}; diff --git a/src/framework/theme/styles/themes/_cosmic.scss b/src/framework/theme/styles/themes/_cosmic.scss index cfba21e10d..812fc29a1b 100644 --- a/src/framework/theme/styles/themes/_cosmic.scss +++ b/src/framework/theme/styles/themes/_cosmic.scss @@ -6,7 +6,7 @@ @import '../core/functions'; @import '../core/mixins'; -@import 'default'; +@import 'dark'; $theme: ( @@ -20,46 +20,6 @@ $theme: ( color-primary-800: #240f7a, color-primary-900: #180957, - color-success-100: #edfff3, - color-success-200: #b3ffd6, - color-success-300: #8cfac7, - color-success-400: #51f0b0, - color-success-500: #00e096, - color-success-600: #00b383, - color-success-700: #008f72, - color-success-800: #007566, - color-success-900: #00524c, - - color-info-100: #f2f8ff, - color-info-200: #c7e2ff, - color-info-300: #94cbff, - color-info-400: #42aaff, - color-info-500: #0095ff, - color-info-600: #006fd6, - color-info-700: #0057c2, - color-info-800: #0041a8, - color-info-900: #002885, - - color-warning-100: #fffdf2, - color-warning-200: #fff1c2, - color-warning-300: #ffe59e, - color-warning-400: #ffc94d, - color-warning-500: #ffaa00, - color-warning-600: #db8b00, - color-warning-700: #b86e00, - color-warning-800: #945400, - color-warning-900: #703c00, - - color-danger-100: #fff2f2, - color-danger-200: #ffd6d9, - color-danger-300: #ffa8b4, - color-danger-400: #ff708d, - color-danger-500: #ff3d71, - color-danger-600: #db2c66, - color-danger-700: #b81d5b, - color-danger-800: #94124e, - color-danger-900: #700940, - color-basic-100: #e8e9fa, color-basic-200: #e8e9fa, color-basic-300: #d3d4f0, @@ -70,15 +30,7 @@ $theme: ( color-basic-800: #171b47, color-basic-900: #171b47, color-basic-1000: #1d2057, - - color-alternate: color-basic-100, - - color-primary-disabled: color-primary-700, - color-success-disabled: color-success-700, - color-info-disabled: color-info-700, - color-warning-disabled: color-warning-700, - color-danger-disabled: color-danger-700, - color-basic-disabled: color-basic-700, + color-basic-1100: #171a3b, background-primary-color-1: color-basic-500, background-primary-color-2: color-basic-600, @@ -91,14 +43,7 @@ $theme: ( border-primary-color-4: color-basic-800, border-primary-color-5: color-basic-900, - text-color: color-basic-200, - text-alternate-color: color-basic-100, - text-disabled-color: color-basic-400, - text-hint-color: color-basic-300, - - shadow: 0 0.5rem 1rem 0 rgba(23, 27, 71, 0.24), - outline-color: color-basic-600, ); -$nb-themes: nb-register-theme($theme, cosmic, default); +$nb-themes: nb-register-theme($theme, cosmic, dark); diff --git a/src/framework/theme/styles/themes/_dark.scss b/src/framework/theme/styles/themes/_dark.scss new file mode 100644 index 0000000000..23343e299c --- /dev/null +++ b/src/framework/theme/styles/themes/_dark.scss @@ -0,0 +1,42 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@import '../core/functions'; +@import '../core/mixins'; +@import 'default'; + +$theme: ( + + color-primary-disabled: color-primary-700, + color-success-disabled: color-success-700, + color-info-disabled: color-info-700, + color-warning-disabled: color-warning-700, + color-danger-disabled: color-danger-700, + color-basic-disabled: color-basic-700, + + background-primary-color-1: color-basic-800, + background-primary-color-2: color-basic-900, + background-primary-color-3: color-basic-1000, + background-primary-color-4: color-basic-1100, + + border-primary-color-1: color-basic-800, + border-primary-color-2: color-basic-900, + border-primary-color-3: color-basic-1000, + border-primary-color-4: color-basic-1100, + border-primary-color-5: color-basic-1100, + + text-color: color-basic-100, + text-alternate-color: color-basic-100, + text-disabled-color: color-basic-700, + text-hint-color: color-basic-500, + + shadow: 0 0.5rem 1rem 0 rgba(23, 27, 71, 0.24), + + outline-color: color-basic-600, +); + +// register the theme +$nb-themes: nb-register-theme($theme, dark, default); diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 160af686bf..71bb9c5e3c 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -112,14 +112,15 @@ $theme: ( color-basic-100: white, color-basic-200: #f7f8fa, - color-basic-300: #edf0f5, + color-basic-300: #edf0f4, color-basic-400: #dde1eb, color-basic-500: #c8cedb, - color-basic-600: #a6aebd, - color-basic-700: #8992a3, - color-basic-800: #6a7385, - color-basic-900: #4b5466, - color-basic-1000: #0d2540, + color-basic-600: #a7b0c1, + color-basic-700: #657084, + color-basic-800: #2e384f, + color-basic-900: #232a39, + color-basic-1000: #1a1f32, + color-basic-1100: #131728, color-alternate: color-basic-100,