(这是我前几天在自己的博客里瞎写的。现在因为要关闭博客,所以转到这里了。图片中的水印为原博客的地址。不过因为它马上就要不存在了,我也找不到原图,就继续用吧。)
使用ATOM也有一小段时间了。非常喜欢,于是想创建一套自己的主题。它的官方文档中有对主题的详细介绍,对照文档制作主题非常简单。如果英语比较好的话,建议直接看这里。我上午制作了一个,在这里做一下记录。
主题一共分两部分,分别是Interface Theme与Syntax Theme。Interface的这部分略麻烦些,所以先来说说建立这部分主题。
Interface Theme
首先,去下载一个主题。我下载的是这个,从它的Github上下载到任意目录下,改成自己的名字。比如我改成了“faluo-theme-ui”,下载到桌面上。
然后,创建链接。在命令行下执行以下命令。注意把文件夹目录换成你自己的:
cd ~/.atom/packages
apm link /Users/faluo/Desktop/faluo-theme-ui
之后可以按[{SCODE}]cmd+,[{/SCODE}]打开设置,选择Themes,就可以从UI Themes列表中找到自己的主题了。
最后,启动Atom,选择菜单中的View-Developer-Open In Dev Mode…
,在这个窗口中打开刚才下载好的ui主题,结构是这样的:
我对这份dark主题还算比较满意,所以不想大改,只想把侧边栏选中状态时的蓝色换成橙色,所以要关注的文件只有2个:package.json和styles/ui-variables.less。
先到package.json
中,把“name”,“version”和”description”等信息改成自己的,再打开styles/ui-variables.less
,这里列出了很多字体和颜色的定义,然而看起来不太直观。可以通过Styleguide来查看。方法是按cmd+shift+p
,输入styleguide
并回车。如图:
这里列出了所有style,直观多了。通过这里,我知道了如果我想改变边栏选中时的颜色,只要修改background-color-selected的颜色值就可以了。于是回到ui-variables.less
中,找到这个变量,改成我想要的颜色(#D16E2E)即可。重新加载主题就能看到效果了。
其它部分的颜色,自己慢慢改吧。
Syntax Theme
同样先打开Dev mode
,同时按cmd+shift+p
,输入generate syntax theme
并回车,为主题命名,选择一个保存的位置就可以了。注意名字一定要以-syntax结尾。
保存好后,就可以在设置-Themes的Syntax主题列表中看到刚建好的主题了。选择它。Syntax部分比较简单,不需要手动建立链接,目录结构也少了许多:
把package.json中“name”,“version”和”description”等信息改成自己的,之后看styles目录。主要修改这个目录中的文件。
colors.less
文件中有许多颜色的定义。这里面的颜色值都可以修改,也可以增加。比如我这里增加一个叫“faluo”的颜色,值是“#e6e606”,所以在文件最后新加一行“@faluo: #e6e606;”。
接下来打开base.less
,找到“.comment”,把它的颜色改成自己的“faluo”色并重新加载主题,就可以看到以前在黑色背景下看不清的亮灰色注释,变成了刺眼的黄色。
其它的颜色,可以在base.less里边试边改。