美文网首页春风送暖入屠苏
修改与创建自己的Atom主题

修改与创建自己的Atom主题

作者: Faluo | 来源:发表于2016-01-13 15:36 被阅读4769次

(这是我前几天在自己的博客里瞎写的。现在因为要关闭博客,所以转到这里了。图片中的水印为原博客的地址。不过因为它马上就要不存在了,我也找不到原图,就继续用吧。)

使用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列表中找到自己的主题了。

ui03.png

最后,启动Atom,选择菜单中的View-Developer-Open In Dev Mode…,在这个窗口中打开刚才下载好的ui主题,结构是这样的:

ui01.png

我对这份dark主题还算比较满意,所以不想大改,只想把侧边栏选中状态时的蓝色换成橙色,所以要关注的文件只有2个:package.json和styles/ui-variables.less。
先到package.json中,把“name”,“version”和”description”等信息改成自己的,再打开styles/ui-variables.less,这里列出了很多字体和颜色的定义,然而看起来不太直观。可以通过Styleguide来查看。方法是按cmd+shift+p,输入styleguide并回车。如图:

ui02.png

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

ui04.png

其它部分的颜色,自己慢慢改吧。

Syntax Theme

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

syn01.png

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

syn02.png

把package.json中“name”,“version”和”description”等信息改成自己的,之后看styles目录。主要修改这个目录中的文件。
colors.less文件中有许多颜色的定义。这里面的颜色值都可以修改,也可以增加。比如我这里增加一个叫“faluo”的颜色,值是“#e6e606”,所以在文件最后新加一行“@faluo: #e6e606;”。
接下来打开base.less,找到“.comment”,把它的颜色改成自己的“faluo”色并重新加载主题,就可以看到以前在黑色背景下看不清的亮灰色注释,变成了刺眼的黄色。

syn03.png
syn04.png

其它的颜色,可以在base.less里边试边改。

相关文章

  • 修改与创建自己的Atom主题

    (这是我前几天在自己的博客里瞎写的。现在因为要关闭博客,所以转到这里了。图片中的水印为原博客的地址。不过因为它马上...

  • Kafka之主题创建与修改

    引子 如果broker端配置auto.create.topics.enable为true(默认为true),当收到...

  • atom

    插件: 主题 atom-material-ui好看 atom-material-syntax 美化 atom-be...

  • vscode 插件配置

    主题插件 Atom One Dark Theme好看的主题1.png Atom One Light Theme护眼...

  • atom主题

    atom自带的UI主题都不怎么好看,可以自己装一些 之后选择自己安装的theme就可以了 感觉都不怎么好看!

  • centOS7安装kafka

    解压 修改配置文件 修改配置文件 启动kafka 检测是否启动 创建主题 创建生产者 创建消费者

  • atom显示application.yml文件不隐藏

    在文件夹中找到atom的文件,修改~/.atom/congig.cson文件 把hideVcsIgnoredFil...

  • VSCode 常用插件

    一、主题 Atom One Dark Theme Atom One Light Theme One Dark Pr...

  • phpstorm使用atom主题

    phpstorm默认的主题是白底黑字的,我一般会换成atom的主题,方法如下 第一步 下载atom主题icls文件...

  • atom

    atom安装位置atom默认是安装在/user/local/bin下的,如果想要修改安装位置,可以添加INSTAL...

网友评论

    本文标题:修改与创建自己的Atom主题

    本文链接:https://www.haomeiwen.com/subject/tkmckttx.html