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

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

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

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

例如，可以把.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菜單來執(zhí)行。當你編輯你的主題時，修改會立即表現(xiàn)出來。

建議不要在你的語法主題中指定font-family，因為會覆蓋Atom設置中的Font Family字段。如果你仍舊想要推薦一款適合你主題的字體，我們推薦你在README文件中這么做。

創(chuàng)建界面主題

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

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

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

開發(fā)的工作流

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

即時重啟

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

要想開啟dev模式的窗口：

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

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

開發(fā)者工具

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

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

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

簡單介紹請查看Google的擴展教程。

Atom 樣式指南

如果你在創(chuàng)建一個界面主題，你可能想要一種方式來查看你的主題如何影響系統(tǒng)中的組件。樣式指南是一個頁面，里面渲染了所有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提供了一些變量，你可以在你自己的主題或者包中使用它們。

在主題中使用

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

在包中使用

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

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

這里是一個.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 -

上一篇：在Atom中移動下一篇：作用域設置、作用域和作用域描述符

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

創(chuàng)建主題

開始

創(chuàng)建語法主題