<!-- 譯者:Github@wizardforcel -->
# 創建主題 #
Atom的界面使用HTML渲染,并且通過Less來定義樣式,它是CSS的超集。不要擔心之前從未聽說過Less,它類似于CSS,但是帶有一些便捷的擴展。
Atom支持兩種主題:UI和語法。UI主題為樹視圖、選擇夾、下拉列表和狀態欄之類的元素定義樣式。語法主題為編輯器中的代碼定義樣式。
主題可以從設置視圖安裝和修改,你可以選擇`Atom > Preferences…`菜單,然后在左側的側欄中選擇“Install”和“Theme”部分來打開它。
## 開始 ##
主題是十分直截了當的,但是如果你在開始之前熟悉一些事情,會很有用處:
+ Less是CSS的超集,但是它擁有一些像變量這樣便利的特性。如果你并不熟悉它的語法,花幾分鐘在[這里](https://speakerdeck.com/danmatthews/less-css)熟悉它。
+ 你也可能想要復習一遍[package.json](https://atom.io/docs/v1.0.4/ch00/_atom_package_json)的概念。這個文件幫助你把主題分布給其它用戶。
+ 你的主題中的“package.json”包必須含有一個`theme`鍵,值為`ui`或者`syntax`,為了讓Atom識別為主題。
+ 你可以在atom.io上面找到現有的主題,或者建立它們的分支(fork)。
## 創建語法主題 ##
讓我們來創建你的第一個主題。
按下`cmd-shift-P`來開始,并且輸入“Generate Syntax Theme”就會一個新的主題包。選擇“Generate Syntax Theme”之后,Atom會詢問你要把主題新建在哪個目錄下。我們把要創建的主題叫做“motif-syntax”。提示:語法主題應該以“-syntax”結尾。
然后Atom會彈出一個窗口展示motif-syntax主題,帶有一些預先創建的文件和文件夾。如果你打開設置視圖(`cmd-,`),并且訪問左邊的Themes部分,你會看到Syntax Theme下拉列表中列出了Motif。從菜單中選擇它來加載。現在打開新的編輯器之后,你應該看到motif-syntax主題被激活了。
打開styles/colors.less來修改預先定義的各個顏色變量。例如,把`@red`變成`#f4c2c1`。
接著打開styles/base.less來修改預先定義的選擇器。選擇器為編輯器中不同部分定義樣式,例如注釋、字符串和側欄中的行號。
例如,可以把`.gutter``background-color`設置為`@red`。
通過按下`cmd-alt-ctrl-l`重啟Atom,來在Atom窗口中查看你的修改。這真是極好的。
提示:你可以通過在dev模式中打開新窗口,來避免查看你所做的修改時重啟Atom。來命令行中運行`atom --dev .`來打開dev模式的Atom窗口。也可以按下`cmd-shift-o`或者打開`View > Developer > Open in Dev Mode`菜單來執行。當你編輯你的主題時,修改會立即表現出來。
建議不要在你的語法主題中指定`font-family`,因為會覆蓋Atom設置中的`Font Family`字段。如果你仍舊想要推薦一款適合你主題的字體,我們推薦你在README文件中這么做。
## 創建界面主題 ##
界面主題必須提供`ui-variables.less`文件,它包含了核心主題提供的所有變量。這些在[“主題變量”](https://atom.io/docs/v1.0.4/ch00/_atom_theme_vars)一節會提到。
執行以下步驟來創建UI主題:
1. 創建以下倉庫之一的分支:
+ [atom-dark-ui](https://github.com/atom/atom-dark-ui)
+ [atom-light-ui](https://github.com/atom/atom-light-ui)
2. 克隆分支到本地文件系統
3. 在主題的目錄中打開命令行
4. 在命令行中通過運行`atom --dev .`,或者點擊`View > Developer > Open in Dev Mode`菜單,以dev模式打開你的新主題
5. 在主題的`package.json`文件中修改主題的名字
6. 以`-ui`結尾的名字命名你的主題,例如`super-white-ui`
7. 運行`apm link`來把你的主題符號鏈接到`~/.atom/packages`
8. 使用`cmd-alt-ctrl-L`重啟Atom
9. 通過設置視圖的Themes部分中的UI Theme下拉列表來開啟主題
10. 做一些修改。由于你在dev模式窗口下打開主題,修改會立即在編輯器中反映,并不需要重啟。
## 開發的工作流 ##
下面是一些使主題開發更快速更簡單的工具。
### 即時重啟 ###
在你修改你的主題之后,按下`cmd-alt-ctrl-L`來重啟不是十分理想。在dev模式的Atom窗口下,Atom支持樣式的即時更新。
要想開啟dev模式的窗口:
1. 通過選擇`View > Developer > Open in Dev Mode`菜單,或者按下`cmd-shift-o`快捷鍵來直接在dev模式窗口中打開你的主題。
2. 修改你的主題并保存它。你的修改應該會馬上應用。
如果你想要在任何時候都重新加載全部的樣式,你可以使用`cmd-ctrl-shift-r`快捷鍵。
### 開發者工具 ###
Atom基于Chrome瀏覽器,并且支持Chrome開發者工具。你可以選擇`View > Toggle Developer Tools`菜單,或者使用`cmd-alt-i`快捷鍵來打開它。
開發者工具允許你查看各個元素,以及他們的CSS屬性。

簡單介紹請查看Google的[擴展教程](img/dev-tools.png)。
### Atom 樣式指南 ###
如果你在創建一個界面主題,你可能想要一種方式來查看你的主題如何影響系統中的組件。[樣式指南](https://github.com/atom/styleguide)是一個頁面,里面渲染了所有Atom支持的組件。
打開命令面板(`cmd-shift-P`)尋找“styleguide”,或者使用`cmd-ctrl-shift-g`快捷鍵來打開樣式指南。

## 主題變量 ##
Atom的UI提供了一些變量,你可以在你自己的主題或者包中使用它們。
### 在主題中使用 ###
每個自定義的主題都要指定`ui-variables.less`文件,其中定義了所有下面的變量。主題列表中最上面的主題會被加載,以及可供導入。
### 在包中使用 ###
在任何你的包的`.less`文件中,你可以通過從Atom導入`ui-variables`文件來訪問主題變量。
你的包應該只指定結構化的樣式,并且它們應該全部來自樣式指南。你的包不應該指定顏色、內邊距(padding)、或者使用絕對像素的任何東西。你應該使用主題變量來代替它。如果你遵循了這一點,你的包將會在任何主題下都表現得很好。
這里是一個`.less`文件的例子,一個包可以使用以下主題變量來定義:
```
@import "ui-variables";
.my-selector {
background-color: @base-background-color;
padding: @component-padding;
}
```
### 變量 ###
**文本顏色**
+ `@text-color`
+ `@text-color-subtle`
+ `@text-color-highlight`
+ `@text-color-selected`
+ `@text-color-info` - 藍色
+ `@text-color-success`- 綠色
+ `@text-color-warning` - 橙色或者黃色
+ `@text-color-error` - 紅色
**背景顏色**
+ `@background-color-info` - 藍色
+ `@background-color-success` - 綠色
+ `@background-color-warning` - 橙色或者黃色
+ `@background-color-error` - 紅色
+ `@background-color-highlight`
+ `@background-color-selected`
+ `@app-background-color` - 所有編輯器組件下面的應用背景
**組件顏色**
+ `@base-background-color` -
+ `@base-border-color` -
+ `@pane-item-background-color` -
+ `@pane-item-border-color` -
+ `@input-background-color` -
+ `@input-border-color` -
+ `@tool-panel-background-color` -
+ `@tool-panel-border-color` -
+ `@inset-panel-background-color` -
+ `@inset-panel-border-color` -
+ `@panel-heading-background-color` -
+ `@panel-heading-border-color` -
+ `@overlay-background-color` -
+ `@overlay-border-color` -
+ `@button-background-color` -
+ `@button-background-color-hover` -
+ `@button-background-color-selected` -
+ `@button-border-color` -
+ `@tab-bar-background-color` -
+ `@tab-bar-border-color` -
+ `@tab-background-color` -
+ `@tab-background-color-active` -
+ `@tab-border-color` -
+ `@tree-view-background-color` -
+ `@tree-view-border-color` -
+ `@ui-site-color-1` -
+ `@ui-site-color-2` -
+ `@ui-site-color-3` -
+ `@ui-site-color-4` -
+ `@ui-site-color-5` -
**組件尺寸**
+ `@disclosure-arrow-size` -
+ `@component-padding` -
+ `@component-icon-padding` -
+ `@component-icon-size` -
+ `@component-line-height` -
+ `@component-border-radius` -
+ `@tab-height` -
**字體**
+ `@font-size` -
+ `@font-family` -