<!-- 譯者：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` -