原文：https://akveo.github.io/nebular/docs/guides/enable-theme-system#advanced-setup
啟用主題系統
注意
如果您使用我們的 ngx-admin 入門套件 那麼您已經有了進階設定。
基礎設定
當：你只須要 Nebular 提供的預設樣式（宇宙樣式 cosmic 或是預設樣式 default），且不打算使用變數或是「熱載 hot-reload」 支援。
- 那麼您只須要加入一個你想要使用的主題的 CSS 檔案到
.angular-cli.json 檔案像是:
1
2
3
4
| "styles": [
"../node_modules/@nebular/theme/styles/prebuilt/cosmic.css", // 或是 default.css
],
|
就這樣！ 未來，如果您須要進階功能您可以簡單地從「一般設定步驟」或是「進階設定步驟」開始使用主題。
一般設定
當：您希望在您的程式碼中使用主題系統並且能夠更改變數時。
注意：這個設定可能看起來有點冗長，遺憾的是 angular-cli 對客製化配置的支援有限；希望未來的版本和外掛支援可以大大簡化。
- 使用 Nebular 主題宣告建立一個
themes.scss 檔案。我們假設這個主題是以 default 主題為基礎，所以依然命名為 default。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@import '~@nebular/theme/styles/theming';
@import '~@nebular/theme/styles/themes/default';
$nb-themes: nb-register-theme((
color-bg: #4ca6ff,
shadow: 0 1px 2px 0 #3780c0,
layout-bg: #ffffff,
color-fg: #222222
), default, default);
|
- 現在找到您的
styles.scss (或者建立一個然後加入到 .angular-cli.json 的 "styles": [..] 之下) 並且根據以下程式碼貼上：
1
2
3
4
5
6
7
8
9
10
11
|
@import 'themes';
@import '~@nebular/theme/styles/globals';
@include nb-install() {
@include nb-theme-global();
};
|
- 在這個步驟，您已經可以自訂變數以變更元件的外觀與行為。為了能夠將這些（或是新的） 變數使用於客製化的元件中，只需要在任何
*.component.scss 中加入一行 import 。
1
2
3
4
5
6
| @import '../../../@theme/styles/themes';
:host {
background: nb-theme(card-bg);
}
|
注意
只需要呼叫 nb-theme(variable-name) 函數即可存取變數.
這個步驟您將得到類似下圖的內容：
進階設定
當：您須要在 run-time 時在多個主題中切換主題時
這個步驟假設您已經完成 一般設定 步驟.
- 假設您已經有一個來自前一個步驟產生的
default 主題的 themes.scss 檔案，讓我們加入一個新的主題，以 Nebular 的 cosmic 主題為基礎並且命名為 dark:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| ...
@import '~@nebular/theme/styles/themes/cosmic';
$nb-enabled-themes: (default, dark);
...
$nb-themes: nb-register-theme((
color-bg: #222222,
shadow: 0 1px 2px 0 #000000,
color-fg: #303030,
layout-bg: #ededed,
), dark, cosmic);
|
所以您的 themes.scss 檔案會看起來是：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| @import '~@nebular/theme/styles/theming';
@import '~@nebular/theme/styles/themes/default';
@import '~@nebular/theme/styles/themes/cosmic';
$nb-enabled-themes: (default, dark);
$nb-themes: nb-register-theme((
color-bg: #4ca6ff,
shadow: 0 1px 2px 0 #3780c0,
layout-bg: #ffffff,
color-fg: #222222,
), default, default);
$nb-themes: nb-register-theme((
color-bg: #222222,
shadow: 0 1px 2px 0 #000000,
color-fg: #303030,
layout-bg: #ededed,
), dark, cosmic);
|
此時啟用您的 dark 主題您的頁面會看起來像是：
- 現在啟用「熱載
hot reload」的魔術，打包您所有含有 nb-install-component 的 *.component.scss 樣式 像是：
1
2
3
4
5
6
7
8
9
10
| @import '../../../@theme/styles/themes';
@include nb-install-component() {
background: nb-theme(card-bg);
.container {
background: nb-theme(color-bg);
font-weight: nb-theme(font-weight-bold);
}
}
|
注意
這個 install-component SCSS mixin ‘已經涵蓋了’ 宣告在程式碼中的 :host，意思是你不需要在 @include nb-install-component() { 中而外宣告一個 :host 並且樣式也會正確的渲染到這個 host。
完成，你可以在 run-time 時改變主題。以下是如何從元件中執行這個操作：
1
2
3
4
5
6
7
8
|
constructor(private themeService: NbThemeService) {
}
enableDarkTheme() {
this.themeService.changeTheme('dark');
}
|
相關文章