ANGULAR | akveo/nebular 系列 - 2.3. Nebular 主題系統 | 中文

原文：https://akveo.github.io/nebular/docs/guides/theme-system#nebular-theme-system

Nebular 主題系統

Nebular 主題系統是一套規則， 我們將如何組織 SCSS 文件和變數以實現以下目標:

  • 能夠透過管理變數不需要改變 SCSS 的前提下，能夠靈活地改變應用程式的產品外觀。
  • 能夠在 runtime 時不需要重新載入頁面而切換視覺主題。
  • 支援 CSS 變數 (部分實現)。

Theme 對應表

每個主題都被表示為一個 SCSS map 並帶有「鍵值對」的清單：

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
$theme: (
  font-main: unquote('"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'),
  font-secondary: font-main,

  font-weight-thin: 200,
  font-weight-light: 300,
  font-weight-normal: 400,
  font-weight-bolder: 500,
  font-weight-bold: 600,
  font-weight-ultra-bold: 800,

  base-font-size: 16px,

  font-size-xlg: 1.25rem,
  font-size-lg: 1.125rem,
  font-size: 1rem,
  font-size-sm: 0.875rem,
  font-size-xs: 0.75rem,

  radius: 0.375rem,
  padding: 1.25rem,
  margin: 1.5rem,
  line-height: 1.25,
  
  ...

其中 key 是變數名稱而 value 是 SCSS 的原始值 (像是 color、string 等 …) 或 父親變數名稱 以便您可以繼承不同變數的值:

1
2
3
$theme: (
  font-main: unquote('"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'),
  font-secondary: font-main,

這裡的 font-secondary 繼承來自 font-main 的值.

元件的樣式變數

有一個變數清單，您可以為 Nebular 的每一個元件作修改
例如 - header 元件變數如下：

1
2
3
4
5
6
7
8
9
10
11
12
...

header-font-family: font-secondary,
header-font-size: font-size,
header-line-height: line-height,
header-fg: color-fg-heading,
header-bg: color-bg,
header-height: 4.75rem,
header-padding: 1.25rem,
header-shadow: shadow,

...

如您所見，有一組簡單元件的 8 個變數，其中有 6 個變數繼承主題變數的預設值。
意味著，您可以建立一個全新且統一的元件產品外觀，在大部分情況下您只需要改變大約 10 個通用變數像是 color-bg 、 shadow 等，即可完全改變 UI。

元件樣式變數清單被指定於「元件文件」中，例如 styles for header component.

樣式變數的用法

如果您想使用變數在您客製化的樣式檔案，您只須要做的是呼叫 nb-theme(var-name) function (在 successful setup of the Theme System 詳細介紹

1
2
3
4
5
6
@import '../../../@theme/styles/themes';

:host {

  background: nb-theme(card-bg); // and use it
}

根據目前已經啟用的主題在您的主題檔案中繼承 card-bg 變數，您將得到正確的顏色。

已內建的主題

目前有 3 個內建的主題：

  • default - 清晰的白色主題
  • cosmic - 黑暗的主題
  • corporate - 商業主題

這些主題也可以互相繼承例如 cosmic　就是繼承於 default 主題.

「熱載 hot-reload」 多個主題的魔力

您可以在 ngx-admin demo 看到，您可以切換主題而不需要重新載入頁面。
當每個使用者有多的視覺主題時或者您希望提供您的使用者這樣的配置，以便他可以決定哪一個主題最適合他時，這是很有用的。
這個功能唯一的要求是將您所有的元件樣式包裝在一個特定的 nb-install-component 中，並使用 nb-theme 取得正確的值:

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);
  }
}

相關文章

#angular #akveo/nebular #ngx-admin
ANGULAR | akveo/nebular 系列 - 2.3. Nebular 主題系統 | 中文
http://example.com/2018/07/30/concept-theme-system/
Author
John Doe
Posted on
July 30, 2018
Licensed under