Atom 創(chuàng)建主題

創(chuàng)建主題

Atom的界面使用HTML渲染，并且通過(guò)Less來(lái)定義樣式，它是CSS的超集。不要擔(dān)心之前從未聽(tīng)說(shuō)過(guò)Less，它類似于CSS，但是帶有一些便捷的擴(kuò)展。

Atom支持兩種主題：UI和語(yǔ)法。UI主題為樹(shù)視圖、選擇夾、下拉列表和狀態(tài)欄之類的元素定義樣式。語(yǔ)法主題為編輯器中的代碼定義樣式。

主題可以從設(shè)置視圖安裝和修改，你可以選擇Atom > Preferences…菜單，然后在左側(cè)的側(cè)欄中選擇“Install”和“Theme”部分來(lái)打開(kāi)它。

開(kāi)始

主題是十分直截了當(dāng)?shù)?，但是如果你在開(kāi)始之前熟悉一些事情，會(huì)很有用處：

• Less是CSS的超集，但是它擁有一些像變量這樣便利的特性。如果你并不熟悉它的語(yǔ)法，花幾分鐘在這里熟悉它。
• 你也可能想要復(fù)習(xí)一遍package.json的概念。這個(gè)文件幫助你把主題分布給其它用戶。
• 你的主題中的“package.json”包必須含有一個(gè)theme鍵，值為ui或者syntax，為了讓Atom識(shí)別為主題。
• 你可以在atom.io上面找到現(xiàn)有的主題，或者建立它們的分支（fork）。

創(chuàng)建語(yǔ)法主題

讓我們來(lái)創(chuàng)建你的第一個(gè)主題。

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

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

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

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

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

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

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

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

創(chuàng)建界面主題

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

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

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

開(kāi)發(fā)的工作流

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

即時(shí)重啟

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

要想開(kāi)啟dev模式的窗口：

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

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

開(kāi)發(fā)者工具

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

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

Atom 樣式指南

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

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

主題變量

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

在主題中使用

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

在包中使用

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

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

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

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