按下cmd-shift-P來開始，并且輸入“Generate Syntax Theme”就會(huì)一個(gè)新的主題包。選擇“Generate Syntax Theme”之后，Atom會(huì)詢問你要把主題新建在哪個(gè)目錄下。我們把要?jiǎng)?chuàng)建的主題叫做“motif-syntax”。提示：語法主題應(yīng)該以“-syntax”結(jié)尾。

然后Atom會(huì)彈出一個(gè)窗口展示motif-syntax主題，帶有一些預(yù)先創(chuàng)建的文件和文件夾。如果你打開設(shè)置視圖（cmd-,），并且訪問左邊的Themes部分，你會(huì)看到Syntax Theme下拉列表中列出了Motif。從菜單中選擇它來加載?，F(xiàn)在打開新的編輯器之后，你應(yīng)該看到motif-syntax主題被激活了。

打開styles/colors.less來修改預(yù)先定義的各個(gè)顏色變量。例如，把@red變成#f4c2c1。

接著打開styles/base.less來修改預(yù)先定義的選擇器。選擇器為編輯器中不同部分定義樣式，例如注釋、字符串和側(cè)欄中的行號(hào)。

例如，可以把.gutter``background-color設(shè)置為@red。

通過按下cmd-alt-ctrl-l重啟Atom，來在Atom窗口中查看你的修改。這真是極好的。

提示：你可以通過在dev模式中打開新窗口，來避免查看你所做的修改時(shí)重啟Atom。來命令行中運(yùn)行atom --dev .來打開dev模式的Atom窗口。也可以按下cmd-shift-o或者打開View > Developer > Open in Dev Mode菜單來執(zhí)行。當(dāng)你編輯你的主題時(shí)，修改會(huì)立即表現(xiàn)出來。

建議不要在你的語法主題中指定font-family，因?yàn)闀?huì)覆蓋Atom設(shè)置中的Font Family字段。如果你仍舊想要推薦一款適合你主題的字體，我們推薦你在README文件中這么做。

創(chuàng)建界面主題

界面主題必須提供ui-variables.less文件，它包含了核心主題提供的所有變量。這些在“主題變量”一節(jié)會(huì)提到。

執(zhí)行以下步驟來創(chuàng)建UI主題：

創(chuàng)建以下倉庫之一的分支：
- atom-dark-ui
- atom-light-ui
克隆分支到本地文件系統(tǒng)
在主題的目錄中打開命令行
在命令行中通過運(yùn)行atom --dev .，或者點(diǎn)擊View > Developer > Open in Dev Mode菜單，以dev模式打開你的新主題
在主題的package.json文件中修改主題的名字
以-ui結(jié)尾的名字命名你的主題，例如super-white-ui
運(yùn)行apm link來把你的主題符號(hào)鏈接到~/.atom/packages
使用cmd-alt-ctrl-L重啟Atom
通過設(shè)置視圖的Themes部分中的UI Theme下拉列表來開啟主題
做一些修改。由于你在dev模式窗口下打開主題，修改會(huì)立即在編輯器中反映，并不需要重啟。

開發(fā)的工作流

下面是一些使主題開發(fā)更快速更簡單的工具。

即時(shí)重啟

在你修改你的主題之后，按下cmd-alt-ctrl-L來重啟不是十分理想。在dev模式的Atom窗口下，Atom支持樣式的即時(shí)更新。

要想開啟dev模式的窗口：

通過選擇View > Developer > Open in Dev Mode菜單，或者按下cmd-shift-o快捷鍵來直接在dev模式窗口中打開你的主題。
修改你的主題并保存它。你的修改應(yīng)該會(huì)馬上應(yīng)用。

如果你想要在任何時(shí)候都重新加載全部的樣式，你可以使用cmd-ctrl-shift-r快捷鍵。

開發(fā)者工具

Atom基于Chrome瀏覽器，并且支持Chrome開發(fā)者工具。你可以選擇View > Toggle Developer Tools菜單，或者使用cmd-alt-i快捷鍵來打開它。

開發(fā)者工具允許你查看各個(gè)元素，以及他們的CSS屬性。

http://wiki.jikexueyuan.com/project/atom-flight-manual-zh-cn/images/dev-tools.png" alt="" />

簡單介紹請(qǐng)查看Google的擴(kuò)展教程。

Atom 樣式指南

如果你在創(chuàng)建一個(gè)界面主題，你可能想要一種方式來查看你的主題如何影響系統(tǒng)中的組件。樣式指南是一個(gè)頁面，里面渲染了所有Atom支持的組件。

打開命令面板（cmd-shift-P）尋找“styleguide”，或者使用cmd-ctrl-shift-g快捷鍵來打開樣式指南。

http://wiki.jikexueyuan.com/project/atom-flight-manual-zh-cn/images/styleguide.png" alt="" />

主題變量

Atom的UI提供了一些變量，你可以在你自己的主題或者包中使用它們。

在主題中使用

每個(gè)自定義的主題都要指定ui-variables.less文件，其中定義了所有下面的變量。主題列表中最上面的主題會(huì)被加載，以及可供導(dǎo)入。

在包中使用

在任何你的包的.less文件中，你可以通過從Atom導(dǎo)入ui-variables文件來訪問主題變量。

你的包應(yīng)該只指定結(jié)構(gòu)化的樣式，并且它們應(yīng)該全部來自樣式指南。你的包不應(yīng)該指定顏色、內(nèi)邊距（padding）、或者使用絕對(duì)像素的任何東西。你應(yīng)該使用主題變量來代替它。如果你遵循了這一點(diǎn)，你的包將會(huì)在任何主題下都表現(xiàn)得很好。

這里是一個(gè).less文件的例子，一個(gè)包可以使用以下主題變量來定義：

@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 - 藍(lán)色
@text-color-success- 綠色
@text-color-warning - 橙色或者黃色
@text-color-error - 紅色

背景顏色

@background-color-info - 藍(lán)色
@background-color-success - 綠色
@background-color-warning - 橙色或者黃色
@background-color-error - 紅色
@background-color-highlight
@background-color-selected
@app-background-color - 所有編輯器組件下面的應(yīng)用背景

組件顏色

@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 -

上一篇：在Atom中移動(dòng)下一篇：作用域設(shè)置、作用域和作用域描述符