如何自定义Atom主题

使用Atom有段时间,一直使用别人的主题,想着自己也制作一款主题,便再 官网 上研究一番:

aotm主题,分为两种,一种是界面主题,一种是语法主题,下面就一一试试。

创建界面主题

首先,去下载一个主题,一直使用的是这个 one-dark-ui,下载到本机,并修改文件及主题名称,我修改的 codyer-theme-ui,然后,执行链接命令

1
2
cd ~/.atom/packages
apm link /Users/username/Desktop/codyer-theme-ui

之后,打开设置,选择 themes,就可以看到了。

即时重启

在你修改你的主题之后,按下 cmd-alt-ctrl-L 来重启不是十分理想。在dev模式的Atom窗口下,Atom支持样式的即时更新。

要想开启dev模式的窗口:

通过选择 View > Developer > Open in Dev Mode 菜单,或者按下 cmd-shift-o 快捷键来直接在dev模式窗口中打开你的主题。
修改你的主题并保存它。你的修改应该会马上应用。
如果你想要在任何时候都重新加载全部的样式,你可以使用 cmd-ctrl-shift-r 快捷键。

开发者工具

Atom基于Chrome浏览器,并且支持Chrome开发者工具。你可以选择View > Toggle Developer Tools菜单,或者使用cmd-alt-i快捷键来打开它。

开发者工具允许你查看各个元素,以及他们的CSS属性。

Atom 样式指南

如果你在创建一个界面主题,你可能想要一种方式来查看你的主题如何影响系统中的组件。样式指南是一个页面,里面渲染了所有Atom支持的组件。

打开命令面板(cmd-shift-P)寻找“styleguide”,或者使用cmd-ctrl-shift-g快捷键来打开样式指南。

atom-styleguide

这里列出了所有style,直观多了。通过这里,我知道了如果我想改变边栏选中时的颜色,只要修改background-color-selected 的颜色值就可以了。于是回到 ui-variables.less 中,找到这个变量,改成想要的颜色(#93ffeb)即可。重新加载主题就能看到效果了。

变量

文本颜色

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

创建语法主题

同时按 cmd+shift+p,输入 generate syntax theme 并回车,为主题命名,选择一个保存的位置就可以了。注意名字一定要以-syntax结尾。

保存好后,就可以在设置-Themes的Syntax主题列表中看到刚建好的主题了。选择它。Syntax部分比较简单,不需要手动建立链接,目录结构也少了许多。

目录结构

1
2
3
4
5
codyer-theme-Syntax/
└── styles/
├── base.less
├── colors.less
└── syntax-variables.less

colors.less 修改自己喜好的配色即可。

发布语法主题

  • 首先把制造好的主题上传至github。
  • 进入主题目录 执行 apm publish minor 之后输入github的用户名及密码,会要求输入 atom token,然后上传成功,就可以在 atom编辑器里下载到你自己的主题了。

我的自定义主题

主题名称 codyer-theme-syntax

codyer-theme-html